【Flutter】ネットワーク状況監視のパッケージ「connectivity_plus」
公開日2024.09.25
今回は、Flutterでネットワーク接続状態を確認できるパッケージ「connectivity_plus」について紹介します。
本記事では実際に、ネットワーク接続状態を取得して表示するシンプルなアプリを作成してみます。
それでは早速、見ていきましょう。
connectivity_plusパッケージのインストール
connectivity_plusパッケージをインストールします。
% flutter pub add connectivity_plus
% flutter pub get
ネットワーク状態を取得してみる
今回は、StreamProvider
で継続的にネットワーク接続状態を確認して取得してみます。
import 'package:flutter/material.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('connectivity_plus'),
),
body: StreamBuilder<List<ConnectivityResult>>(
stream: Connectivity().onConnectivityChanged,
builder: (
BuildContext context,
AsyncSnapshot<List<ConnectivityResult>> snapshot,
) {
// データがロード中の場合
if (!snapshot.hasData) {
// エラーが発生した場合
if (snapshot.hasError) return Text('Error: ${snapshot.error}');
// データがない場合
return const CircularProgressIndicator();
}
// データが存在する場合
final data = snapshot.data![0];
if (data == ConnectivityResult.none) {
return const Text('接続がありません');
} else if (data == ConnectivityResult.mobile) {
return const Text('モバイルデータ接続があります');
} else if (data == ConnectivityResult.wifi) {
return const Text('Wi-Fi接続があります');
}
// 上記のいずれの条件にも該当しない場合
return const Text('その他の接続があります');
},
),
),
);
}
}
実際に確認してみると以下のようにWi-Fiでの接続を確認できました。
Wi-Fiを切ってみたりすると接続がないことも確認できます。
サポートされているプラットフォーム
以下、対応されているプラットフォームのサポート状況です。
ドキュメントにも記載はありますが、一部のOSバージョンにおいての挙動が異なることもあるので、気をつけてください。
まとめ
インターネットに接続されていない場合にメッセージを表示したいなど、ネットワーク状況を監視する必要のあるケースでは活躍できるパッケージですね。
また、bluetoothまわりなどもう少しサポート範囲が広がってくれれば、使い方も増えていきそうです。
定期的に更新されているので、今後のアップデートに期待しておきます。