Flutter 检查连接网络 connectivity_plus

视频

https://youtu.be/ZO9M_x_iLUU

前言

有些对通讯敏感的程序，我们需要检查当前连接的网络情况。

我推荐使用 connectivity_plus

https://pub-web.flutter-io.cn/packages/connectivity_plus

这个插件的好处就是支持全平台，这点非常好。

我们今天来写一个例子尝试下这个功能。

这个插件遇到获取状态不对，请用真机调试，模拟器可能有偏差。

步骤

第一步：配置依赖包

pubspec.yaml

dependencies:
   flutter:
     sdk: flutter
 ​
 ​
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
 ​
   connectivity_plus: ^4.0.1

第二步：修改 android 最小编译版本

android/app/build.gradle

改成·minSdkVersion 19

android {
     ...
 ​
     defaultConfig {
         
         applicationId "com.example.flutter_application_connectivity"
         
         minSdkVersion 19 //flutter.minSdkVersion
         
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }

第三步：检查网路连接代码

lib/connectivity.dart

定义 Connectivity 对象

class _ConnectivityPageState extends State<ConnectivityPage> {
   // Connectivity 对象
   final Connectivity _connectivity = Connectivity();

消息订阅 StreamSubscription

// 消息订阅
   late StreamSubscription<ConnectivityResult> _subscription;

返回状态保存

// 初始返回的网络状态
   ConnectivityResult? _connectivityStatus;

初始化，单次检查方式

// 初始化
   Future<void> _init() async {
     try {
       // 方式1：单次请求检查
       final connectivityResult = await _connectivity.checkConnectivity();
       _updateConnectionStatus(connectivityResult);
     } on PlatformException catch (e) {
       print(e);
       print('连接网络出现了异常');
     }
   }

订阅方式

// 初始化
   Future<void> _init() async {
     try {
       // 方式1：单次请求检查
       // final connectivityResult = await _connectivity.checkConnectivity();
       // _updateConnectionStatus(connectivityResult);
 ​
       // 方式2：状态订阅
       _subscription =
           _connectivity.onConnectivityChanged.listen(_updateConnectionStatus);
     } on PlatformException catch (e) {
       print(e);
       print('连接网络出现了异常');
     }
   }

更新订阅状态

Future<void> _updateConnectionStatus(ConnectivityResult result) async {
     setState(() {
       _connectivityStatus = result;
     });
 ​
     if (result == ConnectivityResult.mobile) {
       print('成功连接移动网络');
     } else if (result == ConnectivityResult.wifi) {
       print('成功连接WIFI');
     } else if (result == ConnectivityResult.ethernet) {
       print('成功连接到以太网');
     } else if (result == ConnectivityResult.vpn) {
       print('成功连接vpn网络');
     } else if (result == ConnectivityResult.bluetooth) {
       print('成功连接蓝牙');
     } else if (result == ConnectivityResult.other) {
       print('成功连接除以上以外的网络');
     } else if (result == ConnectivityResult.none) {
       print('没有连接到任何网络');
     }
   }

初始 initState

@override
  void initState() {
    super.initState();
    _init();
  }

释放 dispose，关闭订阅

@override
  void dispose() {
    _subscription.cancel();
    super.dispose();
  }

视图

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('网路连接检查'),
      ),
      body: Center(
        child: Column(
          children: [
            const Text('状态'),
            Text(_connectivityStatus?.toString() ?? "未知"),
          ],
        ),
      ),
    );
  }

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_connectivity

小结

connectivity_plus 是一个 Flutter 插件，用于检测设备的网络连接状态。它可以检测设备是否连接到互联网，以及连接类型是 Wi-Fi、蜂窝数据还是无网络连接。这个插件的作用和重要性在于：

1. 提供了一种简单、可靠的方法来检测设备的网络连接状态，方便开发者编写更智能的应用程序。
2. 让应用程序可以根据设备的网络连接状态来调整其行为，例如根据网络状况选择合适的数据加载方式、调整 UI 布局等。
3. 支持多种平台，包括 Android、iOS、macOS 和 Windows，可以轻松地在不同平台上进行开发和测试。

总之，connectivity_plus 插件是一个非常有用和重要的工具，可以帮助开发者编写更智能、更适应用户需求的应用程序。

感谢阅读本文

如果我有什么错？请在评论中让我知道。我很乐意改进。

© 猫哥 ducafecat.com

end