Flutter网络状态检测插件check_network的使用

Flutter网络状态检测插件check_network的使用

检查网络连接可用性

通过ping DNS服务器来检查互联网连接是否可用。

目录

• check_network
• 表目录
• 通用信息
• 设置
• 功能
• 如何使用
  • 重建Widget
• 致谢

通用信息

此包通过ping DNS服务器来检查互联网连接的有效性。它非常有用，因为通过将MaterialApp包装在InternetStatusProvider中，可以提供一个互联网状态流，从而可以根据互联网状态执行任何操作。 例如：

• 如果互联网不可用，则重新构建Widget
• 如果互联网不可用，则显示Snackbar
• 如果互联网不可用，则显示对话框
• 如果互联网不可用，则重定向到另一个屏幕
• 等等。

设置

要使用此包，首先需要安装它。您可以通过运行以下命令来安装它：

flutter pub add check_network

或者，您可以在pubspec.yaml文件中添加以下内容：

dependencies:
  check_network: ^0.0.1

功能

• 检查互联网连接可用性
• 将来开发的待办事项列表：
  • 添加检查特定域名地址可用性的选项
  • 支持互联网速度测试

如何使用

要查看完整的示例，请检查example文件夹。

1. 首先，在您的dart文件中导入该包。

import 'package:check_network/check_network.dart';

1. 将最顶层的Widget包装在InternetStatusProvider中。这将为所有子Widget提供当前的互联网状态流。

InternetStatusProvider(
  currentInternetStatus: CurrentInternetStatus(waitOnConnectedStatusInSeconds: 5),
  child: const MyApp(),
),

现在我们将看到如何在互联网状态变化时重建Widget。

重建Widget

具有一个包含StreamBuilder的Scaffold，将InternetStatusProvider.of(context).onStatusChange传递给stream参数，以便访问Internet Status。然后，简单地传递一个基于当前互联网状态返回Widget的函数，这将在互联网状态变化时被调用。

return Scaffold(
  body: StreamBuilder<InternetStatus>(
    stream: InternetStatusProvider.of(context).onStatusChange,
    builder: (context, snapshot) {
      return Center(child: internetStatusWidgetBuilder(snapshot.data));
    },
  ),
);

这样，每次互联网状态发生变化时，Widget都会被重建。请参阅example文件夹中的完整代码和其他更多示例。

致谢

请注意，此包是基于komapeb/data_connection_checker的延续并从中获得了灵感。

我要感谢以下团队：

• Dart团队创建了如此伟大的语言。
• Flutter团队创建了如此伟大的框架。
• Very Good Ventures团队创建了如此优秀的开源项目和包。
• Flutter Community团队提供了出色的包和资源。

示例代码

示例：Widget示例

此示例展示了如何使用此包监听流并构建一个Widget。

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

void main() {
  /// 确保WidgetsFlutterBinding已初始化
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    /// 将最顶层的Widget包装在InternetStatusProvider中。
    /// 这将为整个应用程序提供当前的互联网状态。
    InternetStatusProvider(
      currentInternetStatus: CurrentInternetStatus(connectedStatusDuration: 5),
      child: const MyApp(),
    ),
  );
}

/// 这是用于显示MyApp Widget的MaterialApp。
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: const CheckNetworkDemo(),
    );
  }
}

class CheckNetworkDemo extends StatelessWidget {
  const CheckNetworkDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 返回一个包含StreamBuilder的Scaffold，以在Scaffold的body中显示当前的互联网状态
    return Scaffold(
      body: StreamBuilder<InternetStatus>(
        // 从provider中获取当前的互联网状态
        stream: InternetStatusProvider.of(context).onStatusChange,
        builder: (context, snapshot) {
          // 当接收到新的互联网状态时重建Widget
          return Center(child: internetStatusWidgetBuilder(snapshot.data));
        },
      ),
    );
  }

  // 一个接受`InternetStatus`作为参数并返回一个Widget的函数
  Widget internetStatusWidgetBuilder(InternetStatus? status) {
    switch (status) {
      case InternetStatus.available:
        return const Text(
          'Internet is now available',
          style: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
        );
      case InternetStatus.unavailable:
        return const Text(
          'Internet is unavailable',
          style: TextStyle(
            color: Colors.orange,
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
        );
      case InternetStatus.checking:
        return const Text(
          'Checking internet status',
          style: TextStyle(
            color: Colors.lightBlue,
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
        );
      case InternetStatus.connected:
        return const Text(
          'Internet connection is confirmed',
          style: TextStyle(
            color: Colors.green,
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
        );
      default:
        return const Text(
          'Disconnected from internet',
          style: TextStyle(
            color: Colors.red,
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
        );
    }
  }
}