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

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

特性

  • 一个可以返回ConnectivityStatus流的连接检查器，其中包括：
    • 能够连接到服务器（调用API），具有不同的连接级别（高/低延迟）
    • 无法连接到服务器但网络可用（例如服务器宕机）
    • 网络不可用
  • 还提供了一个ConnectivityDisplay小部件来可视化结果

示例

ConnectivityDisplay小部件显示

  • 图标和颜色可配置
  • 是否显示图标可配置
    • 例如，您可以配置它仅在连接有问题时显示图标

带有提示信息的图标

  • 点击后，提示信息将显示当前连接状态
  • 提示信息可配置

异常显示在Snackbar中

  • 如果设置为开启，在点击图标时，snackbar会显示连接检查过程中出现的异常

使用方法

配置

// 配置
var connectivityConfig = ConnectivityConfig(
    checkInterval: const Duration(seconds: 10), // 每10秒检查一次
    pingLevelConfig: PingLevelConfig(
        goodPingThreshold: const Duration(milliseconds: 100), // 延迟小于等于goodPingThreshold -> 良好连接
        okPingThreshold: const Duration(milliseconds: 500)), // 延迟小于等于okPingThreshold -> 可接受连接
    pingUrl: 'http://localhost:3000/' // ping (HTTP GET) 你的服务器
);

仅使用流

Stream<ConnectivityStatus> connectivityStream = ConnectivityChecker.stream(config);

使用小部件

// 显示配置
var displayConfig = DisplayConfig(loadingIndicatorColor: Colors.black)
      ..set(
          ConnectivityStatusType.goodConnection,
          const DisplayConfigForStatusType.goodConnection(
                display: false, // 如果良好连接则不显示
            ))
      ..set(
          ConnectivityStatusType.okConnection,
          const DisplayConfigForStatusType.okConnection(
              showPingValue: true, // 在提示信息中显示ping值
              iconColor: Colors.yellow))
      ..set(
          ConnectivityStatusType.poorConnection,
          const DisplayConfigForStatusType.poorConnection(
              iconColor: Colors.orange))
      ..set(
          ConnectivityStatusType.hasNetworkButNoConnection,
          const DisplayConfigForStatusType.hasNetworkButNoConnection(
              iconColor: Colors.red))
      ..set(ConnectivityStatusType.offline,
          const DisplayConfigForStatusType.offline(iconColor: Colors.grey));

// 直接使用ConnectivityDisplay小部件
ConnectivityDisplay(config: connectivityConfig, displayConfig: displayConfig),

自定义请求

  • 可以向ConnectivityChecker提供自定义请求操作来检查连接状态，而不是通过给定的URL进行ping（HTTP GET）。
  • 自定义请求应是一个Future<dynamic> Function()类型的函数
  • 如果连接检查失败/请求超时，则应该抛出异常
  • 如果没有抛出异常，则根据完成请求所花费的时间对连接进行分类

示例：

var connectivityConfig = ConnectivityConfig(
    pingRequest: () async {
        // 这里执行一些异步操作
        await Future.delayed(Duration(milliseconds: 100));
    }
);

请求工厂

  • 提供了请求工厂来创建自定义请求操作
  • 如果请求返回指定的状态码，则认为ping成功

示例：

request() async => ApiResponse(200, 'data');
var pingRequest = ConnectivityRequestFactory.requestWithTargetedResponseCode(
    request, [200]);
  • 如果请求返回指定的数据，则认为ping成功

示例：

request() async => ApiResponse(200, 'data');
var pingRequest = ConnectivityRequestFactory.requestWithTargetedData(
    request, (data) => data == 'data');

更多关于Flutter网络连接状态检测插件flutter_connectivity_checker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


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

首先，确保在你的 pubspec.yaml 文件中添加 flutter_connectivity_checker 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_connectivity_checker: ^0.x.x  # 请替换为最新版本号

然后，运行 flutter pub get 命令来安装依赖。

接下来，在你的 Dart 文件中，你可以按照以下步骤使用 flutter_connectivity_checker 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Connectivity Checker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ConnectivityCheckerScreen(),
    );
  }
}

class ConnectivityCheckerScreen extends StatefulWidget {
  @override
  _ConnectivityCheckerScreenState createState() => _ConnectivityCheckerScreenState();
}

class _ConnectivityCheckerScreenState extends State<ConnectivityCheckerScreen> {
  ConnectivityResult _connectivityResult = ConnectivityResult.none;
  String _connectionStatus = 'Unknown';

  @override
  void initState() {
    super.initState();
    _checkConnectivity();
    // 监听网络连接状态变化
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      setState(() {
        _connectivityResult = result;
        _updateConnectionStatus();
      });
    });
  }

  Future<void> _checkConnectivity() async {
    ConnectivityResult result = await Connectivity().checkConnectivity();
    setState(() {
      _connectivityResult = result;
      _updateConnectionStatus();
    });
  }

  void _updateConnectionStatus() {
    switch (_connectivityResult) {
      case ConnectivityResult.mobile:
        _connectionStatus = 'Connected to mobile network';
        break;
      case ConnectivityResult.wifi:
        _connectionStatus = 'Connected to Wi-Fi';
        break;
      case ConnectivityResult.none:
        _connectionStatus = 'Not connected';
        break;
      default:
        _connectionStatus = 'Unknown connectivity status';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Connectivity Checker Demo'),
      ),
      body: Center(
        child: Text(
          _connectionStatus,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 在 pubspec.yaml 中添加了 flutter_connectivity_checker 依赖。
  2. 创建了一个简单的 Flutter 应用，其中包含一个显示当前网络连接状态的屏幕。
  3. 在 ConnectivityCheckerScreen 组件的 initState 方法中，调用 _checkConnectivity 方法来检查初始的网络连接状态。
  4. 使用 Connectivity().onConnectivityChanged.listen 方法来监听网络连接状态的变化，并在状态变化时更新 UI。
  5. 根据网络连接状态，更新 _connectionStatus 字符串，并在屏幕上显示。

这个示例展示了如何使用 flutter_connectivity_checker 插件来检测并响应网络连接状态的变化。

回到顶部