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

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

目录

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

代码说明

  1. 回调函数类型定义

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

    • NetworkConnectedCallback:当网络连接时调用,无参数。

    • NetworkDisconnectedCallback:当网络断开时调用,无参数。

  2. 类成员变量

    • _connectivityConnectivity 插件实例,用于监听网络状态变化。

    • _connectivitySubscription:用于订阅网络状态变化事件的 StreamSubscription

    • _onNetworkChanged_onNetworkConnected_onNetworkDisconnected:分别用于处理网络状态变化、网络连接和网络断开的回调函数。

  3. initNetworkStatusManager 方法

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

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

  4. _handleConnectivityChange 方法

    • 处理网络状态变化事件。

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

    • 根据网络状态调用 _onNetworkConnected_onNetworkDisconnected 回调函数。

  5. 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), // 添加一个占位符,用于间距],),);}
}

代码说明

  1. MyApp

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

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

  2. MyHomePage

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

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

  3. _MyHomePageState

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

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

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

  4. initState 方法

    • 在页面初始化时调用。

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

    • 设置三个回调函数:

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

      • onNetworkConnected:当网络连接时调用,打印日志。

      • onNetworkDisconnected:当网络断开时调用,打印日志。

  5. dispose 方法

    • 在页面销毁时调用。

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

  6. build 方法

    • 构建页面的 UI。

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

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

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

测试结果

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/74283.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从零开始实现 C++ TinyWebServer 处理请求 HttpRequest类详解

文章目录 HTTP 请求报文HttpRequest 类实现 Init() 函数实现 ParseRequestLine() 函数实现 ParseHeader() 函数实现 ParsePath() 函数实现 ParseBody() 函数实现 ParsePost() 函数实现 ParseFromUrlEncoded() 函数实现 UserVerify() 函数实现 Parse() 函数HttpRequest 代码Http…

systemd-networkd 的 *.network 配置文件详解 笔记250323

systemd-networkd 的 *.network 配置文件详解 笔记250323 查看官方文档可以用 man systemd.network命令, 或访问: https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html 名称 systemd.network — 网络配置 概要 network.network 描述 一个纯…

自定义mavlink 生成wireshark wlua插件错误(已解决)

进入正题 python3 -m pymavlink.tools.mavgen --langWLua --wire-protocol2.0 --outputoutput/develop message_definitions/v1.0/development.xml 编译WLUA的时候遇到一些问题 1.ERROR:SCHEMASV:SCHEMAV_CVC_ENUMERATION_VALID 3765:0:ERROR:SCHEMASV:SCHEMAV_CVC_ENUMERAT…

计算机操作系统(四) 操作系统的结构与系统调用

计算机操作系统&#xff08;四&#xff09; 操作系统的结构与系统调用 前言一、操作系统的结构1.1 简单结构1.2 模块化结构1.3 分层化结构1.4 微内核结构1.5 外核结构 二、系统调用1.1 系统调用的基本概念1.2 系统调用的类型 总结&#xff08;核心概念速记&#xff09;&#xf…

深入解析 Spring IOC AOP:原理、源码与实战

深入解析 Spring IOC & AOP&#xff1a;原理、源码与实战 Spring 框架的核心在于 IOC&#xff08;控制反转&#xff09; 和 AOP&#xff08;面向切面编程&#xff09;。今天&#xff0c;我们将深入剖析它们的原理&#xff0c;结合源码解析&#xff0c;并通过 Java 代码实战…

LLM之RAG理论(十四)| RAG 最佳实践

RAG 的过程很复杂&#xff0c;包含许多组成部分。我们如何确定现有的 RAG 方法及其最佳组合&#xff0c;以确定最佳 RAG 实践&#xff1f; 论文 《Searching for Best Practices in Retrieval-Augmented Generation》给出了回答。 本文将从以下三方面进行介绍&#xff1a; 首先…

利用knn算法实现手写数字分类

利用knn算法实现手写数字分类 1.作者介绍2.KNN算法2.1KNN&#xff08;K-Nearest Neighbors&#xff09;算法核心思想2.2KNN算法的工作流程2.3优缺点2.4 KNN算法图示介绍 3.实验过程3.1安装所需库3.2 MNIST数据集3.3 导入手写数字图像进行分类3.4 完整代码3.5 实验结果 1.作者介…

C语言-适配器模式详解与实践

文章目录 C语言适配器模式详解与实践1. 什么是适配器模式&#xff1f;2. 为什么需要适配器模式&#xff1f;3. 实际应用场景4. 代码实现4.1 UML 关系图4.2 头文件 (sensor_adapter.h)4.3 实现文件 (sensor_adapter.c)4.4 使用示例 (main.c) 5. 代码分析5.1 关键设计点5.2 实现特…

Rust函数、条件语句、循环

文章目录 函数**语句与表达式**条件语句循环 函数 Rust的函数基本形式是这样的 fn a_func(a: i32) -> i32 {}函数名是蛇形风格&#xff0c;rust不在意函数的声明顺序&#xff0c;只需要有声明即可 函数参数必须声明参数名称和类型 语句与表达式 这是rust非常重要的基础…

maptalks图层交互 - 模拟 Tooltip

maptalks图层交互 - 模拟 Tooltip 图层交互-模拟tooltip官方文档 <!DOCTYPE html> <html><meta charsetUTF-8 /><meta nameviewport contentwidthdevice-width, initial-scale1 /><title>图层交互 - 模拟 Tooltip</title><style typet…

好吧好吧,看一下达梦的模式与用户的关系

单凭个人感觉&#xff0c;模式在达梦中属于逻辑对象合集&#xff0c;回头再看资料 应该是一个用户可以对应多个模式 问题来了&#xff0c;模式的ID和用户的ID一样吗&#xff1f; 不一样 SELECT USER_ID,USERNAME FROM DBA_USERS WHERE USERNAMETEST1; SELECT ID AS SCHID, NA…

python socket模块学习记录

python黑马程序员 通过python内置socket模块&#xff0c;在电脑本地开发一个服务器&#xff0c;一个客户端&#xff0c;连接后进行连续的聊天。服务器和客户端均可输入exit&#xff0c;主动退出连接。 服务器开发.py import socket# 创建Socket对象 socket_server socket.s…

7-2 sdut-C语言实验-逆序建立链表

7-2 sdut-C语言实验-逆序建立链表 分数 20 全屏浏览 切换布局 作者 马新娟 单位 山东理工大学 输入整数个数N&#xff0c;再输入N个整数&#xff0c;按照这些整数输入的相反顺序建立单链表&#xff0c;并依次遍历输出单链表的数据。 输入格式: 第一行输入整数N;&#xff…

针对永磁电机(PMM)的d轴和q轴电流,考虑交叉耦合补偿,设计P1控制器并推导出相应的传递函数

电流控制回路:针对永磁电机(PMM)的d轴和q轴电流&#xff0c;考虑交叉耦合补偿&#xff0c;设计P1控制器并推导出相应的传递函数。 1. 永磁电机&#xff08;PMM&#xff09;的数学模型 在同步旋转坐标系&#xff08; d − q d - q d−q 坐标系&#xff09;下&#xff0c;永磁同…

ROS多机通信(四)——Ubuntu 网卡 Mesh 模式配置指南

引言 使用Ad-hoc加路由协议和直接Mesh模式配置网卡实现的网络结构是一样的&#xff0c;主要是看应用选择&#xff0c; Ad-Hoc模式 B.A.T.M.A.N. / OLSR 优点&#xff1a;灵活性高&#xff0c;适合移动性强或需要优化的复杂网络。 缺点&#xff1a;配置复杂&#xff0c;需手动…

chap1:统计学习方法概论

第1章 统计学习方法概论 文章目录 第1章 统计学习方法概论前言章节目录导读 实现统计学习方法的步骤统计学习分类基本分类监督学习无监督学习强化学习 按模型分类概率模型与非概率模型 按算法分类按技巧分类贝叶斯学习核方法 统计学习方法三要素模型模型是什么? 策略损失函数与…

爬虫案例-爬取某站视频

文章目录 1、下载FFmpeg2、爬取代码3、效果图 1、下载FFmpeg FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。 点击下载: ffmpeg 安装并配置 FFmpeg 步骤&#xff1a; 1.下载 FFmpeg&#xff1a; 2.访问 FFmpeg 官网。 3.选择 Wi…

车载以太网网络测试-22【传输层-DOIP协议-5】

目录 1 摘要2 DoIP时间参数2.1 ISO 13400定义的时间参数2.2 参数示例 3 DoIP节点内部状态机4 UDSonIP概述5 总结 1 摘要 本文继续对DOIP协议进行介绍&#xff0c;主要是DOIP相关的时间参数、时间参数定义以及流程示例。推荐大家对上文专题进行回顾&#xff0c;有利于系统性学习…

(论文总结)思维链激发LLM推理能力

研究背景&动机 背景:扩大模型规模已被证实具有提升模型性能和模型效率的功效&#xff0c;但是LLM对于完成推理、算术任务仍有较大不足。 动机:从之前的应用和研究中得知&#xff0c;可以用生成自然语言解释、使用神经符号等形式语言的方法来提高大模型的算术推理能力&…

前后端开发概述:架构、技术栈与未来趋势

一、前后端开发的基本概念 1.1 什么是前后端开发&#xff1f; 前后端开发是 Web 开发的两个核心部分&#xff0c;各自承担不同的职责&#xff1a; 前端&#xff08;Frontend&#xff09; 负责网页的用户界面&#xff08;UI&#xff09;和用户体验&#xff08;UX&#xff09;…