Flutterでネット接続を監視できる「internet_connection_checker_plus」の使い方

モバイルアプリを作るとき、
「今ネットに接続できているか？」
「Wi-Fi とモバイルデータの切り替えを検知したい」
といったニーズはよくあります。

そんなとき便利なのが internet_connection_checker_plus パッケージ。
シンプルに オンライン/オフライン判定 ができ、ストリームで監視も可能です。

インストール
基本的な使い方
1. 接続チェック（1回だけ）
2. 接続状態をリアルタイムで監視
特徴
まとめ

インストール

pubspec.yaml に追加します。

dependencies:
  internet_connection_checker_plus: ^2.0.0  # 最新バージョンを確認してください

基本的な使い方

接続チェック（1回だけ）

import 'package:flutter/material.dart';
import 'package:internet_connection_checker_plus/internet_connection_checker_plus.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final hasConnection = await InternetConnection().hasInternetAccess;
  debugPrint("インターネット接続あり？ $hasConnection");

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(child: Text("Internet Connection Checker Plus Demo")),
      ),
    );
  }
}

接続状態をリアルタイムで監視

import 'package:flutter/material.dart';
import 'package:internet_connection_checker_plus/internet_connection_checker_plus.dart';

class ConnectionStatusWidget extends StatefulWidget {
  const ConnectionStatusWidget({super.key});

  @override
  State<ConnectionStatusWidget> createState() => _ConnectionStatusWidgetState();
}

class _ConnectionStatusWidgetState extends State<ConnectionStatusWidget> {
  late final Stream<InternetStatus> _statusStream;

  @override
  void initState() {
    super.initState();
    _statusStream = InternetConnection().onStatusChange;
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<InternetStatus>(
      stream: _statusStream,
      builder: (context, snapshot) {
        if (snapshot.data == InternetStatus.connected) {
          return const Text("✅ オンライン", style: TextStyle(fontSize: 24));
        } else if (snapshot.data == InternetStatus.disconnected) {
          return const Text("❌ オフライン", style: TextStyle(fontSize: 24));
        }
        return const CircularProgressIndicator();
      },
    );
  }
}

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(child: ConnectionStatusWidget()),
    ),
  ));
}