【Flutter】ネットワーク状況監視のパッケージ「connectivity_plus」

【Flutter】ネットワーク状況監視のパッケージ「connectivity_plus」

今回は、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を切ってみたりすると接続がないことも確認できます。

connectivity_plusのwi-fi接続確認

サポートされているプラットフォーム

以下、対応されているプラットフォームのサポート状況です。

ドキュメントにも記載はありますが、一部のOSバージョンにおいての挙動が異なることもあるので、気をつけてください。

connectivity_plusのサポートされているプラットフォーム

まとめ

インターネットに接続されていない場合にメッセージを表示したいなど、ネットワーク状況を監視する必要のあるケースでは活躍できるパッケージですね。

また、bluetoothまわりなどもう少しサポート範囲が広がってくれれば、使い方も増えていきそうです。

定期的に更新されているので、今後のアップデートに期待しておきます。

Anycloudではプロダクト開発の支援を行っています

プロダクト開発をお考えの方はぜひAnycloudにご相談ください。

まずは相談する

記事を書いた人

Matsuura

エンジニア

Matsuura

Twitter

Anycloudでエンジニアしてます!主にFlutterやWebフロントをやっていて、最近はバックエンドやインフラに挑戦・苦戦中。