Flutter 每日库：轻松监听网络变化，就靠 connectivity_plus！

在移动应用开发中，网络状态监听是一个高频需求------比如视频应用在非WiFi环境下限制自动播放，或是在网络断开时提示用户检查连接。今天介绍的 connectivity_plus 插件，正是 Flutter 开发者实现这一功能的利器！

一、为什么需要 connectivity_plus？

1. 核心功能

实时监听网络类型：WiFi、蜂窝数据、蓝牙、VPN 等。
跨平台支持：Android、iOS、Web、Windows 等全平台兼容。
简单易用：几行代码即可实现网络状态订阅。

2. 注意事项

不保证网络可用性：仅检测连接类型，不验证网络是否能访问互联网。
iOS 权限提示：首次安装需用户授权网络权限，否则监听可能失效。
真机调试更准确：模拟器可能返回异常结果。

二、快速集成步骤

1. 添加依赖

在 pubspec.yaml 中引入插件：

yaml 复制代码

dependencies:
  connectivity_plus: ^6.1.3

2. Android 配置

修改 android/app/build.gradle，确保最低 SDK 版本 ≥ 19：

复制代码

defaultConfig {
    minSdkVersion 19
}

并在 AndroidManifest.xml 中添加权限：

ini 复制代码

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

3. 核心代码实现

scala 复制代码

class _ConnectivityPlusPageState extends State<ConnectivityPlusPage> {
  StreamSubscription<List<ConnectivityResult>>? _subscription;
  final Connectivity _connectivity = Connectivity();

  @override
  void initState() {
    super.initState();
    // 订阅网络变化
    _subscription = _connectivity.onConnectivityChanged.listen((result) {
      print('当前网络类型: $result');
      // 根据结果更新UI或业务逻辑
    });
  }

  @override
  void dispose() {
    _subscription?.cancel(); // 务必释放资源
    super.dispose();
  }
  
  // 其他代码...
}

三、高级技巧与场景应用

1. 获取当前网络类型

csharp 复制代码

Future<String> getNetworkType() async {
  final result = await Connectivity().checkConnectivity();
  if (result.contains(ConnectivityResult.wifi)) return "WiFi";
  if (result.contains(ConnectivityResult.mobile)) return "蜂窝网络";
  return "无网络";
}

2. 处理 iOS 网络权限弹窗

建议在开屏页检测网络状态，若未授权则引导用户设置：

scss 复制代码

Future<void> checkInitialNetwork() async {
  final result = await Connectivity().checkConnectivity();
  if (result == ConnectivityResult.none) {
    showDialog(...); // 提示用户开启网络
  }
}

3. 结合网络请求

搭配 dio 或 http 库，在网络恢复时自动重试：

scss 复制代码

_subscription = Connectivity().onConnectivityChanged.listen((result) {
  if (result != ConnectivityResult.none) {
    retryFailedRequests(); // 重新发送失败请求
  }
});