Flutterでネットワーク接続状態を確認して分岐させてみた（connectivity_plus）

#Flutter

#Dart

sora

2024.06.05

こんにちは、ゲームソリューション部の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でネットワーク接続状態の管理をしています。

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型のリストに入れます。
接続状態の履歴をリストに保持したりもできるのだと思いますが、今回は現在の接続状態のみを保持する形にしています。

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final connectivityCheckProvider = StreamProvider<List<ConnectivityResult>>((ref) {
  return Connectivity().onConnectivityChanged;
});

断続的にネットワーク接続状態を取得したい場合

初期状態のみであったり断続的に取得したい場合は、FutureProviderを使用して以下のような形で実装できます。

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;
});