flutter中如何使用connectivity_plus插件检测网络状态

在Flutter应用中，如何使用connectivity_plus插件准确检测当前的网络连接状态（WiFi/移动数据/无网络）？我在pubspec.yaml中添加了依赖并导入了插件，但不知道如何实时监听网络变化并显示不同的状态提示。能否提供一个完整的示例代码，包括初始化检查和处理网络状态变更的Stream监听？另外，这个插件在iOS和Android上的表现是否一致？

nodeper 1楼

在Flutter中使用connectivity_plus插件检测网络状态：

添加依赖到pubspec.yaml
导入包：import 'package:connectivity_plus/connectivity_plus.dart';
检查网络状态：

var connectivityResult = await Connectivity().checkConnectivity();
if (connectivityResult == ConnectivityResult.none) {
  // 无网络
} else {
  // 有网络
}

监听网络变化：使用Connectivity().onConnectivityChanged监听器

更多关于flutter中如何使用connectivity_plus插件检测网络状态的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 2楼

在Flutter中使用connectivity_plus插件检测网络状态的步骤如下：

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  connectivity_plus: ^5.0.1

运行 flutter pub get 安装。

2. 基本使用

import 'package:connectivity_plus/connectivity_plus.dart';

// 检查当前网络状态
Future<void> checkConnectivity() async {
  final connectivityResult = await Connectivity().checkConnectivity();
  if (connectivityResult == ConnectivityResult.mobile) {
    print('移动网络');
  } else if (connectivityResult == ConnectivityResult.wifi) {
    print('WiFi网络');
  } else if (connectivityResult == ConnectivityResult.none) {
    print('无网络');
  }
}

3. 监听网络状态变化

import 'package:flutter/material.dart';

class NetworkStatusWidget extends StatefulWidget {
  @override
  _NetworkStatusWidgetState createState() => _NetworkStatusWidgetState();
}

class _NetworkStatusWidgetState extends State<NetworkStatusWidget> {
  late StreamSubscription<ConnectivityResult> _subscription;

  @override
  void initState() {
    super.initState();
    // 监听网络状态变化
    _subscription = Connectivity().onConnectivityChanged.listen((result) {
      setState(() {
        // 更新UI显示当前网络状态
      });
    });
  }

  @override
  void dispose() {
    _subscription.cancel(); // 取消监听
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ConnectivityResult>(
      future: Connectivity().checkConnectivity(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final status = snapshot.data!;
          return Text('网络状态: ${_getStatusText(status)}');
        }
        return Text('检测中...');
      },
    );
  }

  String _getStatusText(ConnectivityResult result) {
    switch (result) {
      case ConnectivityResult.mobile:
        return '移动网络';
      case ConnectivityResult.wifi:
        return 'WiFi';
      case ConnectivityResult.none:
        return '无网络';
      default:
        return '未知';
    }
  }
}

4. 注意事项

Android配置：需要添加网络权限（AndroidManifest.xml）：

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

iOS配置：iOS无需额外配置。

5. 完整示例

// 在main.dart中使用
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('网络状态检测')),
        body: Center(child: NetworkStatusWidget()),
      ),
    );
  }
}