当前位置：首页 > article >正文

Flutter 学习之旅之 flutter 使用 connectivity_plus 进行网路状态监听（断网/网络恢复事件监听）

article 2026/2/26 20:55:38

Flutter 学习之旅之 flutter 使用 connectivity_plus 进行网路状态监听（断网/网络恢复事件监听）

一、简单介绍

二、connectivity_plus

1、connectivity_plus 实现断网和网络连接状态的事件监听原理

2、使用 connectivity_plus 的注意事项

三、安装 connectivity_plus

四、简单效果

五、简单案例实现

六、关键代码

一、简单介绍

Flutter 是一款开源的 UI 软件开发工具包，由 Google 开发和维护。它允许开发者使用一套代码同时构建跨平台的应用程序，包括移动设备（iOS 和 Android）、Web 和桌面平台（Windows、macOS 和 Linux）。

Flutter 使用 Dart 编程语言，它可以将代码编译为 ARM 或 Intel 机器代码以及 JavaScript，从而实现快速的性能。Flutter 提供了一个丰富的预置小部件库，开发者可以根据自己的需求灵活地控制每个像素，从而创建自定义的、适应性强的设计，这些设计在任何屏幕上都能呈现出色的外观和感觉。

二、connectivity_plus

网址：connectivity_plus | Flutter package

connectivity_plus 是一个 Flutter 插件，用于监听设备的网络状态变化，包括 Wi-Fi、移动网络和无网络连接等状态。它通过提供一个简单的 API，允许开发者实时获取网络连接状态，并在状态发生变化时接收通知。通过订阅网络状态变化的流，开发者可以在应用中实现动态响应网络变化的功能，例如提示用户网络连接问题或调整应用的行为。

1、connectivity_plus 实现断网和网络连接状态的事件监听原理

connectivity_plus 插件通过监听设备的网络连接变化事件来实现网络状态的监听。它利用了底层平台（如 Android 和 iOS）提供的网络状态检测能力，并通过 Dart 的 Stream 提供实时更新。

Android：在 Android 上，connectivity_plus 使用 ConnectivityManager 来监听网络状态变化。当网络连接类型发生变化时（如从 Wi-Fi 切换到移动网络，或网络断开），系统会触发事件，插件捕获这些事件并通过 Dart 的 Stream 传递给 Flutter 应用。

iOS：在 iOS 上，插件通过 Network 框架的 NWPathMonitor 来监听网络路径的变化。当网络状态发生变化时，插件会收到通知，并将这些变化通过 Stream 传递给 Flutter 应用。

2、使用 connectivity_plus 的注意事项

网络状态的不确定性：

即使插件报告了网络连接类型（如 Wi-Fi 或移动网络），也不能保证该网络一定可以访问互联网。例如，某些 Wi-Fi 网络可能需要用户登录才能访问互联网。

开发者应始终准备处理网络请求的超时和错误，而不是完全依赖当前的网络状态。

权限要求：

在某些平台上（如 Android 和 iOS），需要在应用的配置文件中声明网络状态监听权限。例如，在 Android 上需要在 AndroidManifest.xml 中添加 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />。

资源管理：

监听网络状态变化时，需要使用 StreamSubscription 订阅 onConnectivityChanged 流。在不再需要监听时，必须调用 cancel() 方法取消订阅，以避免资源泄漏。

初始化检查：

在应用启动时，建议调用 checkConnectivity() 方法获取当前的网络状态，以确保应用在启动时就能正确处理网络状态。

用户体验：

在某些场景下（如用户未授权网络访问权限），应用可能会出现短暂的无网络状态。开发者可以通过在开屏页提示用户授权网络访问，来改善用户体验。

通过合理使用 connectivity_plus 插件并注意上述事项，开发者可以在 Flutter 应用中有效地管理网络状态，提升应用的健壮性和用户体验。

三、安装 `connectivity_plus`

1、直接运行命令

使用 Flutter：flutter pub add connectivity_plus

2、或者在 pubspec.yaml 添加

dependencies:connectivity_plus: ^6.1.3

四、简单效果

五、简单案例实现

1、这里使用 Android Studio 进行创建 Flutter 项目

2、创建一个 application 的 Flutter 项目

3、项目结构如下

4、实现一个 NetworkStatusManager 类，监听网络断开和恢复的事件

5、在 main 测试网络网络断开和恢复的事件监听功能

6、连接设备，运行简单效果如下

六、关键代码

1、NetworkStatusManager

import 'dart:async';
import 'package:connectivity_plus/connectivity_plus.dart';// 定义回调函数类型
// 网络状态变化时的回调函数，参数为当前的网络状态列表
typedef NetworkStatusCallback = void Function(List<ConnectivityResult> result);// 网络连接时的回调函数，无参数
typedef NetworkConnectedCallback = void Function();// 网络断开时的回调函数，无参数
typedef NetworkDisconnectedCallback = void Function();class NetworkStatusManager {// 使用 Connectivity 插件实例来监听网络状态变化final Connectivity _connectivity = Connectivity();// StreamSubscription 用于订阅网络状态变化事件late StreamSubscription<List<ConnectivityResult>> _connectivitySubscription;// 定义回调函数// 网络状态变化时的回调函数late NetworkStatusCallback _onNetworkChanged;// 网络连接时的回调函数late NetworkConnectedCallback _onNetworkConnected;// 网络断开时的回调函数late NetworkDisconnectedCallback _onNetworkDisconnected;// 初始化网络状态管理器// 参数：// - onNetworkChanged：网络状态变化时的回调函数// - onNetworkConnected：网络连接时的回调函数// - onNetworkDisconnected：网络断开时的回调函数void initNetworkStatusManager({required NetworkStatusCallback onNetworkChanged,required NetworkConnectedCallback onNetworkConnected,required NetworkDisconnectedCallback onNetworkDisconnected,}) {// 保存回调函数_onNetworkChanged = onNetworkChanged;_onNetworkConnected = onNetworkConnected;_onNetworkDisconnected = onNetworkDisconnected;// 监听网络状态变化// 使用 _connectivity.onConnectivityChanged 获取网络状态变化的流// 并订阅该流，当网络状态变化时调用 _handleConnectivityChange 方法_connectivitySubscription =_connectivity.onConnectivityChanged.listen(_handleConnectivityChange);}// 处理网络状态变化// 参数：// - result：当前的网络状态列表void _handleConnectivityChange(List<ConnectivityResult> result) {// 调用网络状态变化的回调函数_onNetworkChanged?.call(result);// 检查网络状态// 如果 result 中包含 ConnectivityResult.none，则认为网络断开if (result.contains(ConnectivityResult.none)) {// 调用网络断开的回调函数_onNetworkDisconnected?.call();} else {// 否则认为网络连接// 调用网络连接的回调函数_onNetworkConnected?.call();}}// 取消监听// 释放资源，取消对网络状态变化事件的订阅void dispose() {_connectivitySubscription.cancel();}
}

代码说明

回调函数类型定义：

NetworkStatusCallback：当网络状态发生变化时调用，参数为当前的网络状态列表。

NetworkConnectedCallback：当网络连接时调用，无参数。

NetworkDisconnectedCallback：当网络断开时调用，无参数。

类成员变量：

_connectivity：Connectivity 插件实例，用于监听网络状态变化。

_connectivitySubscription：用于订阅网络状态变化事件的 StreamSubscription。

_onNetworkChanged、_onNetworkConnected 和 _onNetworkDisconnected：分别用于处理网络状态变化、网络连接和网络断开的回调函数。

initNetworkStatusManager 方法：

初始化网络状态管理器，接收三个回调函数作为参数。

订阅网络状态变化事件，当网络状态变化时调用 _handleConnectivityChange 方法。

_handleConnectivityChange 方法：

处理网络状态变化事件。

调用 _onNetworkChanged 回调函数，通知调用者网络状态已变化。

根据网络状态调用 _onNetworkConnected 或 _onNetworkDisconnected 回调函数。

dispose 方法：

取消对网络状态变化事件的订阅，释放资源。

2、main

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'network_status_manager.dart'; // 假设你将上述代码保存为 network_status_manager.dartvoid main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {// 创建一个 MaterialApp，这是 Flutter 应用的根组件return MaterialApp(title: 'Flutter Demo', // 应用的标题theme: ThemeData(// 定义应用的主题useMaterial3: true, // 使用 Material Design 3colorSchemeSeed: const Color(0x9f4376f8), // 主题颜色种子),home: const MyHomePage(title: 'Flutter Demo Home Page'), // 应用的首页);}
}class MyHomePage extends StatefulWidget {const MyHomePage({Key? key, required this.title}) : super(key: key);// 页面的标题final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {// 当前的网络状态列表，默认为 [ConnectivityResult.none]，表示没有网络连接List<ConnectivityResult> _connectionStatus = [ConnectivityResult.none];// 网络状态管理器实例late NetworkStatusManager _networkStatusManager;@overridevoid initState() {super.initState();// 创建一个 NetworkStatusManager 实例_networkStatusManager = NetworkStatusManager();// 初始化网络状态管理器，并设置回调函数_networkStatusManager.initNetworkStatusManager(onNetworkChanged: (result) {// 当网络状态发生变化时，更新 _connectionStatus 并刷新 UIsetState(() {_connectionStatus = result;});// 打印网络状态变化print('Network status changed: $_connectionStatus');},onNetworkConnected: () {// 当网络连接时，打印日志print('Network connected');},onNetworkDisconnected: () {// 当网络断开时，打印日志print('Network disconnected');},);}@overridevoid dispose() {// 释放资源，取消对网络状态变化事件的订阅_networkStatusManager.dispose();super.dispose();}@overrideWidget build(BuildContext context) {// 构建页面的 UIreturn Scaffold(appBar: AppBar(// 页面的标题栏title: const Text('Network Status Example'),elevation: 4, // 标题栏的阴影高度),body: Column(// 页面的主体内容，使用 Column 布局mainAxisSize: MainAxisSize.min, // 设置 Column 的最小高度children: [const Spacer(flex: 2), // 添加一个占位符，用于间距Text(// 显示当前的网络状态标题'Active connection types:',style: Theme.of(context).textTheme.headlineMedium, // 使用主题的标题样式),const Spacer(), // 添加一个占位符，用于间距ListView(// 使用 ListView 显示当前的网络状态列表shrinkWrap: true, // 允许 ListView 自动调整大小children: _connectionStatus.map((status) {// 遍历 _connectionStatus 列表，生成每个网络状态的文本return Center(child: Text(status.toString(), // 显示网络状态的字符串表示style: Theme.of(context).textTheme.headlineSmall, // 使用主题的小标题样式),);}).toList(),),const Spacer(flex: 2), // 添加一个占位符，用于间距],),);}
}

代码说明

MyApp 类：

这是 Flutter 应用的根组件，负责创建 MaterialApp，配置应用的主题和首页。

MaterialApp 是 Flutter 中用于创建 Material Design 风格应用的组件。

MyHomePage 类：

这是一个 StatefulWidget，表示应用的首页。

它包含一个 title 属性，用于显示页面的标题。

_MyHomePageState 类：

这是 MyHomePage 的状态类，用于管理页面的状态和逻辑。

_connectionStatus：用于存储当前的网络状态列表。

_networkStatusManager：用于管理网络状态监听的实例。

initState 方法：

在页面初始化时调用。

创建 NetworkStatusManager 实例，并初始化网络状态管理器。

设置三个回调函数：

onNetworkChanged：当网络状态发生变化时调用，更新 _connectionStatus 并刷新 UI。

onNetworkConnected：当网络连接时调用，打印日志。

onNetworkDisconnected：当网络断开时调用，打印日志。

dispose 方法：

在页面销毁时调用。

释放资源，取消对网络状态变化事件的订阅。

build 方法：

构建页面的 UI。

使用 Scaffold 创建一个带标题栏的页面。

使用 Column 布局，显示当前的网络状态标题和网络状态列表。

使用 ListView 遍历 _connectionStatus 列表，生成每个网络状态的文本。

测试结果

运行上述代码后，应用将正确监听网络状态的变化：

当网络连接时，会调用 onNetworkConnected 回调函数，并打印 "Network connected"。

当网络断开时，会调用 onNetworkDisconnected 回调函数，并打印 "Network disconnected"。

同时，onNetworkChanged 回调函数会更新 _connectionStatus，并在 UI 中显示当前的网络连接类型。

希望这些注释和代码对你有帮助！如果有任何问题，请随时告诉我。