🌍

【Flutter】インターネット接続を確実にチェック！

2025/04/15に公開

Flutter

Dart

tech

概要

アプリ開発において「ネットワーク接続の有無を正確に把握したい」という場面は少なくありません。

物理的に接続されているかどうかを確認するのにconnectivity_plusパッケージがよく使われますが、このパッケージでは実際にインターネットにアクセスできるかどうかまでは保証しません。(接続結果にwifiやmobileと返ってきても、実際にはインターネットに繋がっていないことがある)

そんなときに頼りになるのが、internet_connection_checker パッケージです。

この記事では、このパッケージで何ができるのかを、ポイントごとにわかりやすく紹介していきます。

✅ インターネット接続を確実にチェック

internet_connection_checker は、単に Wi-Fi やモバイルネットワークに繋がっているかどうかを見るのではなく、実際に外部のサーバーと通信できるかどうかをチェックしてくれます。
たとえば https://www.google.com などのアドレスに ping を飛ばして、接続可能かを確認する仕組みです。

import 'package:internet_connection_checker/internet_connection_checker.dart';

void main() async {
  final bool isConnected = await InternetConnectionChecker.instance.hasConnection;
  if (isConnected) {
    print('Device is connected to the internet');
  } else {
    print('Device is not connected to the internet');
  }
}

デフォルトでは以下のURLで疎通確認が行われていました。

🔄 接続状態の変化をリアルタイム監視

ネットワークの接続状態が変わったことをリアルタイムで検知できます。たとえば、接続が切れたときや復帰したときに、UIを更新したりデータを再取得したりといった処理が可能です。

たとえば Todo リストのようなアプリで、接続が回復した瞬間にデータを自動で再取得する…といったことも簡単に実現可能です。
このようなユースケースには Flutter Bloc / Cubit と組み合わせた例がドキュメントにも掲載されています。

import 'package:internet_connection_checker/internet_connection_checker.dart';

void main() {
  final connectionChecker = InternetConnectionChecker.instance;

  final subscription = connectionChecker.onStatusChange.listen(
    (InternetConnectionStatus status) {
      if (status == InternetConnectionStatus.connected) {
        print('Connected to the internet');
      } else {
        print('Disconnected from the internet');
      }
    },
  );

  // Remember to cancel the subscription when it's no longer needed
  subscription.cancel();
}

🐢 遅いインターネットの検出も可能

「つながってはいるけど遅い…」というケースも、slowConnectionConfig を設定すれば検出できます。ユーザー体験にこだわるアプリでは、通信速度に応じてUIを調整することができます。

void main() async {
  final customChecker = InternetConnectionChecker.createInstance(
    slowConnectionConfig: SlowConnectionConfig(
        enableToCheckForSlowConnection: true,
        slowConnectionThreshold: const Duration(seconds: 1),
      ),
  );

  bool isConnected = await customChecker.hasConnection;
  print('Custom instance connected: $isConnected');
}

⚙️ カスタムサーバーの設定で独自チェック

「自社のバックエンドに接続できるか確認したい」など、特定のURLを対象に接続判定したい場合は、アドレスを自由に指定できます。
デフォルトのURLでも疎通確認はできますが、利用制限や一時的なダウンの可能性もあるので、商用アプリや安定性重視なら自前でホストするURLに変更するのがおすすめです。(例: Cloud Storageに静的ホスティングするなど)

import 'package:internet_connection_checker/internet_connection_checker.dart';

void main() async {
  final customChecker = InternetConnectionChecker.createInstance(
    addresses: [
      AddressCheckOption(uri: Uri.parse('https://api.github.com/users/octocat')),
      AddressCheckOption(
        uri: Uri.parse('https://api.agify.io/?name=michael'),
      ),
    ],
  );

  bool isConnected = await customChecker.hasConnection;
  print('Custom instance connected: $isConnected');
}

さらに requireAllAddressesToRespond を使えば、すべてのアドレスに接続できているかを判定条件にすることも可能です。

import 'package:internet_connection_checker/internet_connection_checker.dart';

void main() async {
  // Create a custom instance with requireAllAddressesToRespond set to true
  /// Remember to dispose of [customChecker] instance, when it's not needed 
  /// to prevent memory leaks.
  final customChecker = InternetConnectionChecker.createInstance(
    requireAllAddressesToRespond: true,
    addresses: [
      AddressCheckOption(uri: Uri.parse('https://dummyapi.online/api/movies/1')),
      AddressCheckOption(
        uri: Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
      ),
    ],
  );

  // Check connectivity
  final bool isConnected = await customChecker.hasConnection;

  if (isConnected) {
    print('All specified backend servers are reachable.');
  } else {
    print('Not all specified backend servers are reachable.');
  }
}

🧩 対応プラットフォームもバッチリ

Android	iOS	macOS	Web	Linux	Windows
✅	✅	✅	✅	✅	✅

まとめ

internet_connection_checker は、Flutterアプリにおいてネットワーク接続の有無を確実に把握したいときに非常に役立つライブラリです。
また、通信の「遅さ」や「状態の変化」にまで対応できるため、UXを一段階アップさせたいアプリにも最適です。

導入もシンプルなので、ぜひプロジェクトに取り入れてみてはいかがでしょうか？