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

简介

Internet Connection Checker Plus 是一个Flutter包，它能够以亚秒级响应时间检查您的互联网连接状态，即使是在移动网络上也能快速响应！

该库通过检查对各种 Uri 的可达性来监控和验证互联网连接。它依赖于 connectivity_plus 包来监听连接变化，并使用 http 包进行网络请求。

特性

• 检查互联网连接状态
• 监听互联网连接变化

支持平台

权限设置

Android

在 AndroidManifest.xml 文件中添加以下权限：

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

macOS

在 macOS 的 .entitlements 文件中添加以下权限：

<key>com.apple.security.network.client</key>
<true/>

更多信息请参考 Flutter Networking Documentation。

使用方法

1. 添加依赖

在 pubspec.yaml 文件中添加 internet_connection_checker_plus 包：

dependencies:
  internet_connection_checker_plus: ^2.7.0

2. 导入包

在 Dart 文件中导入 internet_connection_checker_plus 包：

import 'package:internet_connection_checker_plus/internet_connection_checker_plus.dart';

3. 检查互联网连接

最简单的方法是使用 InternetConnection 类来检查互联网连接：

bool result = await InternetConnection().hasInternetAccess;

4. 监听互联网连接变化

InternetConnection 类提供了一个 InternetStatus 流，可以用来监听互联网连接的变化：

final listener = InternetConnection().onStatusChange.listen((InternetStatus status) {
  switch (status) {
    case InternetStatus.connected:
      // 互联网已连接
      break;
    case InternetStatus.disconnected:
      // 互联网已断开
      break;
  }
});

不要忘记在不再需要时取消订阅，以防止内存泄漏并释放资源：

listener.cancel();

5. 添加自定义 Uri 进行检查

InternetConnection 类可以配置为使用自定义 Uri 检查互联网连接：

final connection = InternetConnection.createInstance(
  customCheckOptions: [
    InternetCheckOption(uri: Uri.parse('https://example.com')),
  ],
);

重要提示： 确保自定义 Uri 没有启用缓存，否则结果可能不准确。在 web 平台上，确保自定义 Uri 不被 CORS 阻止。

6. 添加自定义成功标准

InternetConnection 类可以配置为使用自定义成功标准检查互联网连接：

final connection = InternetConnection.createInstance(
  customCheckOptions: [
    InternetCheckOption(
      uri: Uri.parse('https://example.com'),
      responseStatusFn: (response) {
        return response.statusCode >= 69 && response.statusCode < 169;
      },
    ),
    InternetCheckOption(
      uri: Uri.parse('https://example2.com'),
      responseStatusFn: (response) {
        return response.statusCode >= 420 && response.statusCode < 1412;
      },
    ),
  ],
);

7. 应用生命周期变化时暂停和恢复

在应用进入后台时暂停网络请求，在应用返回前台时恢复：

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late final StreamSubscription<InternetStatus> _subscription;
  late final AppLifecycleListener _listener;

  @override
  void initState() {
    super.initState();
    _subscription = InternetConnection().onStatusChange.listen((status) {
      // 处理互联网状态变化
    });
    _listener = AppLifecycleListener(
      onResume: _subscription.resume,
      onHide: _subscription.pause,
      onPause: _subscription.pause,
    );
  }

  @override
  void dispose() {
    _subscription.cancel();
    _listener.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 构建你的组件
  }
}

默认 Uri

InternetConnection 类默认使用的 Uri 如下：

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 internet_connection_checker_plus 包：

// Flutter Packages
import 'package:flutter/material.dart';

// Pages
import 'pages/custom_success_criteria.dart';
import 'pages/custom_uris.dart';
import 'pages/listen_once.dart';
import 'pages/listen_to_stream.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Internet Connection Checker Plus Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  final pages = {
    'Listen Once': const ListenOnce(),
    'Listen to Stream': const ListenToStream(),
    'Custom URIs': const CustomURIs(),
    'Custom Success Criteria': const CustomSuccessCriteria(),
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Internet Connection Checker Plus Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: pages.entries.map((entry) {
            return Padding(
              padding: const EdgeInsets.all(10.0),
              child: ElevatedButton(
                onPressed: () => Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => entry.value,
                  ),
                ),
                child: Text(entry.key),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

希望这些信息对你有所帮助！如果你喜欢这个包，请给它一个 Like 👍🏼 和 Star ⭐。

致谢

此包是基于 internet_connection_checker 包修改而来，而后者又是基于 data_connection_checker 包修改而来，后者已不再维护。本包旨在支持 web 平台，这是 internet_connection_checker 包目前不支持的功能。