Flutter网络连接检测插件cross_connectivity的使用

简介

cross_connectivity 是一个用于处理移动、Web和桌面平台上的 Connectivity 和 REAL Connection 状态的Flutter插件。它支持iOS、Android、Web、Windows、Linux和macOS等平台。

开始使用

添加依赖

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

dependencies:
  cross_connectivity: any

或者使用Git版本：

dependencies:
  cross_connectivity:
    git:
      url: https://github.com/marchdev-tk/cross_connectivity

导入包

在Dart文件中添加以下导入语句：

import 'package:cross_connectivity/cross_connectivity.dart';

使用方法

功能性方法

该插件提供了两个流（Stream）：

• isConnected：显示设备是否真正连接到网络。
• onConnectivityChanged：仅显示连接状态，不提供实际网络连接的状态。

对于一次性检查，可以使用以下方法：

• checkConnection()：类似于 isConnected，但返回 Future<bool> 而不是 Stream<bool>。
• checkConnectivity()：类似于 onConnectivityChanged，但返回 Future<ConnectivityStatus> 而不是 Stream<ConnectivityStatus>。

此外，还有以下方法（仅适用于Android/iOS/macOS）：

• getWifiName()：获取已连接网络的Wi-Fi名称（SSID）。
• getWifiBSSID()：获取已连接网络的Wi-Fi BSSID。
• getWifiIP()：获取已连接Wi-Fi网络的IP地址。

这些方法已迁移到 wifi_info_flutter 插件中。

组件方法

作为功能性方法的替代，可以使用 ConnectivityBuilder 组件：

ConnectivityBuilder(
  builder: (context, isConnected, status) => Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Icon(
        isConnected == true
            ? Icons.signal_wifi_4_bar
            : Icons.signal_wifi_off,
        color: isConnected == true ? Colors.green : Colors.red,
      ),
      const SizedBox(width: 8),
      Text(
        '$status',
        style: TextStyle(
          color: status != ConnectivityStatus.none
              ? Colors.green
              : Colors.red,
        ),
      ),
    ],
  ),
)

示例代码

以下是一个完整的示例应用，展示了如何使用 cross_connectivity 插件来检测网络连接状态：

// Copyright (c) 2021, the MarchDev Toolkit project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cross Connectivity Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cross Connectivity Example'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: ConnectivityBuilder(
              builder: (context, isConnected, status) => Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(
                    isConnected == true
                        ? Icons.signal_wifi_4_bar
                        : Icons.signal_wifi_off,
                    color: isConnected == true ? Colors.green : Colors.red,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    '$status',
                    style: TextStyle(
                      color: status != ConnectivityStatus.none
                          ? Colors.green
                          : Colors.red,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

特性请求和Bug报告

如果您有任何特性请求或发现了Bug，请随时在 GitHub Issues 中提交。

希望以上内容能帮助您更好地理解和使用 cross_connectivity 插件。如果有任何问题或需要进一步的帮助，请随时提问！