【Flutter】connectivity_plus でネットワーク状況を監視

プラグイン

対象者

  • Flutterでネットワークが繋がっているかリアルタイムで監視したい人

はじめに

インターネットに繋がっていることが前提のアプリを作成しています。そこで、ネットワークに繋がっていない場合は警告のダイアログを出そうと思います。そのため、ネットワークの接続状況をStreamで監視します。
「connectivity_plus」を使って、ネットワークの状況に応じてメッセージがリアルタイムで変わるようにします。また、ネットワークに繋がっていない場合は、警告のメッセージを表示します。本来的には、ダイアログを表示するつもりです。

インストール

connectivity_plusパッケージをインストールします。

flutter pub add connectivity_plus
flutter pub get

実施するソース

本来的に必要なコードは以下の通りです。
Connectivity().onConnectivityChangedがStreamなので、StreamBuilderに渡して、状況によって出力するWidgetを変更します。

StreamBuilder(
      stream: Connectivity().onConnectivityChanged,
      builder: (BuildContext context,
          AsyncSnapshot<ConnectivityResult> snapshot) {
        final connectionStatus = snapshot.data!;

        return Column(
          children: [
            Visibility(
                visible: connectionStatus == ConnectivityResult.none,
                child: Text('ネットワークに繋げてください')),
            Text(connectionStatus.toString()),
          ],
        );
      },
    ),

まとめ

以上で、「connectivity_plus」を使用して、リアルタイムに接続状況を把握する方法でした。接続先がインターネットに繋がっているか、という別の問題はありますが、そこまで実装する必要はないかな、と思っています。

参考

全ソース

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Connectivity Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: StreamBuilder(
          stream: Connectivity().onConnectivityChanged,
          builder: (BuildContext context,
              AsyncSnapshot<ConnectivityResult> snapshot) {
            if (!snapshot.hasData) {
              return const CircularProgressIndicator();
            }
            if (snapshot.hasError) {
              return Text(snapshot.error.toString());
            }

            final connectionStatus = snapshot.data!;

            return Column(
              children: [
                Visibility(
                    visible: connectionStatus == ConnectivityResult.none,
                    child: Text('ネットワークに繋げてください')),
                Text(connectionStatus.toString()),
              ],
            );
          },
        ),
      ),
    );
  }
}