Flutter网络连接监控插件connectivity_guard的使用

Flutter网络连接监控插件connectivity_guard的使用

Connectivity Guard 是一个用于实时监测设备互联网连接状态的 Flutter 包。当设备在线时，它会显示自定义的 child 小部件；当设备离线时，它会显示预设的“无网络连接”对话框。

预览

connectivity_guard

特性 ✨

  • 实时监测互联网连接。
  • 设备在线时显示自定义小部件。
  • 设备离线时显示对话框。
  • 简单轻量级实现。
  • 支持Wi-Fi和移动数据。

安装 🚀

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  connectivity_guard: ^1.0.0

然后运行：

flutter pub get

使用 📖

将你的 widget 树包裹在 ConnectionAwareWidget 中，并传递你想要显示的小部件作为 child。

示例

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: ConnectivityGuardWidget(
        title: const Text('无网络连接'),
        content: const Text('无法继续，你需要连接到互联网'),
        child: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按下了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

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

1 回复

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


connectivity_guard 是一个用于监控网络连接的 Flutter 插件。它可以帮助开发者检测设备的网络连接状态，并在网络状态发生变化时做出相应的处理。以下是如何使用 connectivity_guard 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 connectivity_guard 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  connectivity_guard: ^1.0.0  # 请使用最新版本

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

2. 初始化 ConnectivityGuard

在你的 Flutter 应用中，你需要在应用启动时初始化 ConnectivityGuard。通常，你可以在 main.dart 文件中进行初始化：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 ConnectivityGuard
  await ConnectivityGuard.initialize(
    checkInterval: Duration(seconds: 5),  // 检查网络状态的间隔时间
  );

  runApp(MyApp());
}

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

3. 监听网络状态变化

你可以通过 ConnectivityGuard 来监听网络状态的变化，并在网络状态发生变化时做出相应的处理。以下是一个简单的示例：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ConnectivityStatus _connectivityStatus = ConnectivityStatus.unknown;

  @override
  void initState() {
    super.initState();
    
    // 监听网络状态变化
    ConnectivityGuard.instance.onStatusChanged.listen((status) {
      setState(() {
        _connectivityStatus = status;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Connectivity'),
      ),
      body: Center(
        child: Text(
          'Network Status: ${_connectivityStatus.toString()}',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

4. 获取当前网络状态

你也可以直接获取当前的网络状态：

ConnectivityStatus currentStatus = await ConnectivityGuard.instance.getCurrentStatus();
print('Current network status: $currentStatus');

5. 处理网络状态变化

根据不同的网络状态，你可以做出不同的处理。例如，当网络断开时，你可以显示一个提示信息：

ConnectivityGuard.instance.onStatusChanged.listen((status) {
  if (status == ConnectivityStatus.none) {
    // 网络断开
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('No Internet Connection'),
        content: Text('Please check your internet connection.'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('OK'),
          ),
        ],
      ),
    );
  }
});

6. 停止监听

在不需要监听网络状态时，你可以停止监听以节省资源：

ConnectivityGuard.instance.dispose();
回到顶部