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

> 「connectivity_plus」はFlutterのパッケージで、アプリ内でモバイルとWi-Fiの接続状態を検出し、ネットワークの変更をリアルタイムで監視できます。これにより、ネットワークの可用性に基づいた動的な対応が可能になります。

- 公開日: 2024-09-25
- 著者: Matsu
- タグ: Flutter
- URL: https://tech.anycloud.co.jp/articles/flutter-connectivity-plus

---

今回は、Flutterでネットワーク接続状態を確認できるパッケージ「connectivity\_plus」について紹介します。

<div class="link-card-wrap"><a class="link-card" href="https://pub.dev/packages/connectivity_plus" target="_blank" rel="noopener noreferrer"><span class="link-card-body"><span class="link-card-title">connectivity_plus | Flutter package</span><span class="link-card-description">Flutter plugin for discovering the state of the network (WiFi &amp; mobile/cellular) connectivity on Android and iOS.</span><span class="link-card-meta"><img class="link-card-favicon" src="./linkcard-01-favicon.webp" alt=""><span class="link-card-domain">pub.dev</span></span></span><img class="link-card-image" src="./linkcard-01-image.webp" alt=""></a></div>

本記事では実際に、ネットワーク接続状態を取得して表示するシンプルなアプリを作成してみます。

それでは早速、見ていきましょう。

## connectivity\_plusパッケージのインストール

connectivity\_plusパッケージをインストールします。

```dart
% flutter pub add connectivity_plus
% flutter pub get
```

## ネットワーク状態を取得してみる

今回は、`StreamProvider`で継続的にネットワーク接続状態を確認して取得してみます。

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

<figure><img src="./image-001.webp" alt="connectivity_plusのwi-fi接続確認" width="778" height="268"></figure>

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

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

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

<figure><img src="./image-002.webp" alt="connectivity_plusのサポートされているプラットフォーム" width="898" height="696"></figure>

## まとめ

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

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

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

<div class="link-card-wrap"><a class="link-card" href="https://pub.dev/packages/connectivity_plus" target="_blank" rel="noopener noreferrer"><span class="link-card-body"><span class="link-card-title">connectivity_plus | Flutter package</span><span class="link-card-description">Flutter plugin for discovering the state of the network (WiFi &amp; mobile/cellular) connectivity on Android and iOS.</span><span class="link-card-meta"><img class="link-card-favicon" src="./linkcard-02-favicon.webp" alt=""><span class="link-card-domain">pub.dev</span></span></span><img class="link-card-image" src="./linkcard-02-image.webp" alt=""></a></div>
