こんにちは、ゲームソリューション部のsoraです。
今回は、Flutterでネットワーク接続状態を確認して分岐させてみた（connectivity_plus）ことについて書いていきます。
実装した画面
ネットワーク接続状態を取得して、表示する文字列を表示するシンプルなアプリです。
初期状態のみを取得するのではなく、継続的に取得して変更があれば文字列も更新する作りになっています。
利用する主要なパッケージ
connectivity_plus
connectivity_plus | Flutter package
使用したバージョン：connectivity_plus 6.0.3
ネットワーク接続状態を取得するためのパッケージ
flutter_riverpod
flutter_riverpod | Flutter package
使用したバージョン：flutter_riverpod 2.5.1
状態管理パッケージ
多くの情報がある人気なパッケージのため、詳しい説明は割愛します。
コードの解説
コードは以下です。
main.dartでメインの画面、provider/connectivity_check.dartでネットワーク接続状態の管理をしています。
main.dart
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'provider/connectivity_check.dart';
void main() {
runApp(
const ProviderScope(
child: MyApp()
)
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.lightBlueAccent),
useMaterial3: true,
fontFamily: 'Noto Sans JP'
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends ConsumerWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
// ネットワーク接続状態
final nwConnectivity = ref.watch(connectivityCheckProvider);
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('NW接続状況テスト'),
),
body: Center(
child: Column(
children: [
const Text('以下にネットワーク接続状態を表示します'),
const SizedBox(height: 20),
nwConnectivity.when(
// 分岐には入れていないものの、ethernetやbluetooth、vpnなどの接続も取得可能
data: (data){
// List型のためリストの先頭を指定して取得する
if (data[0] == ConnectivityResult.none){
return const Text('接続がありません');
} else if (data[0] == ConnectivityResult.mobile) {
return const Text('モバイルデータ接続があります');
} else if (data[0] == ConnectivityResult.wifi) {
return const Text('Wi-Fi接続があります');
} else {
return const Text('その他の接続があります');
}
},
error: (error, trace) {
return const Text('エラー');
},
loading: () {
return Container();
}
),
],
),
),
);
}
}StreamProviderで継続的にネットワーク接続状態を確認して取得しています。
ネットワーク接続の状態はConnectivityResult型のリストに入れます。
接続状態の履歴をリストに保持したりもできるのだと思いますが、今回は現在の接続状態のみを保持する形にしています。
provider/connectivity_check.dart
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final connectivityCheckProvider = StreamProvider<List<ConnectivityResult>>((ref) {
return Connectivity().onConnectivityChanged;
});断続的にネットワーク接続状態を取得したい場合
初期状態のみであったり断続的に取得したい場合は、FutureProviderを使用して以下のような形で実装できます。
provider/connectivity_check2.dart
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final connectivityCheckFirstProvider = FutureProvider<List<ConnectivityResult>>((ref) async {
List<ConnectivityResult> connectivityResult = await (Connectivity().checkConnectivity());
return connectivityResult;
});最後に
今回は、Flutterでネットワーク接続状態を確認して分岐させてみた（connectivity_plus）ことを記事にしました。
どなたかの参考になると幸いです。
2
