Flutter网络连接状态检测插件flutter_connectivity的使用

当然，下面是一个关于如何使用 flutter_connectivity 插件来检测 Flutter 应用中的网络连接状态的代码示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_connectivity 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_connectivity: ^3.0.6  # 请检查最新版本号

2. 安装依赖

保存 pubspec.yaml 文件后，在命令行中运行以下命令来安装依赖：

flutter pub get

3. 导入插件

在你的 Dart 文件中导入 flutter_connectivity 插件：

import 'package:flutter_connectivity/flutter_connectivity.dart';

4. 检测网络连接状态

以下是一个简单的示例，展示了如何使用 flutter_connectivity 插件来检测网络连接状态：

import 'package:flutter/material.dart';
import 'package:flutter_connectivity/flutter_connectivity.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ConnectivityScreen(),
    );
  }
}

class ConnectivityScreen extends StatefulWidget {
  @override
  _ConnectivityScreenState createState() => _ConnectivityScreenState();
}

class _ConnectivityScreenState extends State<ConnectivityScreen> {
  var connectivityResult = '';
  var connectivityStatus = ConnectivityStatus.none;

  @override
  void initState() {
    super.initState();
    initConnectivity();

    // 监听网络连接状态变化
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      setState(() {
        connectivityResult = result.toString();
        connectivityStatus = result;
      });
    });
  }

  Future<void> initConnectivity() async {
    var connectivityResult = await (await Connectivity().checkConnectivity())!;

    if (connectivityResult == ConnectivityResult.mobile) {
      setState(() {
        connectivityStatus = ConnectivityResult.mobile;
        connectivityResult = 'Connected to mobile network';
      });
    } else if (connectivityResult == ConnectivityResult.wifi) {
      setState(() {
        connectivityStatus = ConnectivityResult.wifi;
        connectivityResult = 'Connected to WiFi';
      });
    } else {
      setState(() {
        connectivityStatus = ConnectivityResult.none;
        connectivityResult = 'Not connected to any network';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Connectivity Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Connection Status: $connectivityResult',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            if (connectivityStatus == ConnectivityResult.mobile)
              Text(
                'You are connected to mobile network',
                style: TextStyle(color: Colors.green),
              )
            else if (connectivityStatus == ConnectivityResult.wifi)
              Text(
                'You are connected to WiFi',
                style: TextStyle(color: Colors.green),
              )
            else
              Text(
                'You are not connected to any network',
                style: TextStyle(color: Colors.red),
              ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

保存所有文件后，你可以通过以下命令运行你的 Flutter 应用：

flutter run

这个示例展示了如何使用 flutter_connectivity 插件来检测网络连接状态，并在网络连接状态发生变化时更新 UI。