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

简介

s_network_connection_checker 是一个用于检测网络连接状态的 Flutter 插件。通过该插件，您可以轻松检测设备是否具有互联网连接，并实时监听网络状态的变化。

截图

基本用法	底部提示

全屏加载动画

配置参数

以下是一些关键配置参数：

• [failedPingCount] - 检测到失败的 ping 次数达到此值时，认为网络已断开。
• [reTryDuration] - 每隔多久发送一次 ping 请求。
• [pingTimeout] - 如果在指定时间内未收到响应，则认为请求失败。
• [urls] - 要进行 ping 的目标地址列表，默认取第一个元素。

示例代码

SNetworkConnectionChecker.instance.setConfig(
  failedPingCount: 2,         // 失败次数
  pingTimeout: const Duration(seconds: 2), // 超时时间
  reTryDuration: const Duration(seconds: 3), // 重试间隔
  urls: [
    SIpModel("Google 1", "8.8.8.8", 53), // Google DNS 1
    SIpModel("Google 2", "8.8.4.4", 53), // Google DNS 2
  ],
);

使用方法

检查是否有网络连接

使用 hasConnection() 方法可以快速检查当前设备是否联网。

var hasConnection = await SNetworkConnectionChecker.instance.hasConnection();

print("Has connection $hasConnection");
runApp(const FullScreenWarningWithOpacity());

监听网络连接状态变化

通过监听 isConnected 流，您可以实时获取网络连接的状态。

void main() async {
  // 开始监听网络状态
  SNetworkConnectionChecker.instance.startListen();
  runApp(const FullScreenWarningWithOpacity());
}

// 监听网络连接状态变化
SNetworkConnectionChecker.instance.isConnected.listen(
  (value) {
    // true 表示已连接，false 表示未连接，null 表示正在加载
    print("Connection status changed $value");
  },
);

在 UI 中使用

基本用法

MaterialApp(
  title: 'SNetwork connection checker example',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    useMaterial3: true,
  ),
  builder: (context, child) {
    return Scaffold(
      body: SNetworkConnectionCheckerWidget(
        loadingBuilder: () {
          return const Center(child: Text("Loading")); // 加载页面
        },
        disConnectedBuilder: () {
          return const Center(child: Text("Custom disconnected page")); // 断开连接页面
        },
        child: child!, // 主页面内容
      ),
    );
  },
  home: const Scaffold(
    body: Center(
      child: Text("Connected"), // 已连接页面
    ),
  ),
);

其他用法

通过 builder 方法动态控制 UI 状态。

MaterialApp(
  title: 'SNetwork connection checker example',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
    useMaterial3: true,
  ),
  builder: (context, child) {
    return Scaffold(
      body: SNetworkConnectionChecker.instance.isConnected.builder((loading, isConnected, error, context) {
        if (isConnected == null) {
          return const Center(
            child: Text("Loading"), // 加载中
          );
        }
        return Stack(
          children: [
            // 动画效果：根据连接状态调整透明度
            AnimatedOpacity(
              opacity: isConnected ? 1 : 0.1,
              duration: const Duration(milliseconds: 100),
              child: IgnorePointer(
                ignoring: isConnected == false,
                child: child, // 主页面内容
              ),
            ),
            // 显示断网提示
            if (!isConnected)
              const Align(
                alignment: Alignment.center,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("No connection"), // 无网络提示
                      Text("Please check your network connection"), // 检查网络提示
                    ],
                  ),
                ),
              ),
          ],
        );
      }),
    );
  },
  home: const Scaffold(
    body: Center(
      child: Text("Home page"), // 主页内容
    ),
  ),
);

示例代码

以下是完整的示例代码，展示如何使用 s_network_connection_checker 插件。

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

void main() async {
  // 初始化配置
  var hasConnection = await SNetworkConnectionChecker.instance.hasConnection();
  SNetworkConnectionChecker.instance.selectedIp.setState(SIpModel("Google 1", "8.8.8.8", 53));
  SNetworkConnectionChecker.instance.setConfig(
    failedPingCount: 2,
    pingTimeout: const Duration(seconds: 2),
    reTryDuration: const Duration(seconds: 3),
    urls: [
      SIpModel("Google 1", "8.8.8.8", 53),
      SIpModel("Google 2", "8.8.4.4", 53),
    ],
  );

  print("Has connection $hasConnection");
  runApp(const FullScreenWarningWithOpacity());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 开始监听网络状态
    SNetworkConnectionChecker.instance.isConnected.listen(
      (value) {
        print("Connection status changed $value");
      },
    );
    return MaterialApp(
      title: 'SNetwork connection checker example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      builder: (context, child) {
        return Scaffold(
          body: SNetworkConnectionCheckerWidget(
            loadingBuilder: () {
              return const Center(child: Text("Loading"));
            },
            disConnectedBuilder: () {
              return const Center(child: Text("Custom disconnected page"));
            },
            child: child!,
          ),
        );
      },
      home: const Scaffold(
        body: Center(
          child: Text("Connected"),
        ),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 开始监听网络状态
    SNetworkConnectionChecker.instance.startListen();
    return MaterialApp(
      title: 'SNetwork connection checker example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      builder: (context, child) {
        return Scaffold(
          body: SNetworkConnectionChecker.instance.isConnected.builder((loading, isConnected, error, context) {
            if (isConnected == null) {
              return const Center(
                child: Text("Loading"),
              );
            }
            return Stack(
              children: [
                AnimatedOpacity(
                  opacity: isConnected ? 1 : 0.1,
                  duration: const Duration(milliseconds: 100),
                  child: IgnorePointer(
                    ignoring: isConnected == false,
                    child: child,
                  ),
                ),
                if (!isConnected)
                  const Align(
                    alignment: Alignment.center,
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text("No connection"),
                          Text("Please check your network connection"),
                        ],
                      ),
                    ),
                  ),
              ],
            );
          }),
        );
      },
      home: const Scaffold(
        body: Center(
          child: Text("Home page"),
        ),
      ),
    );
  }
}