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

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

网络连接检测插件check_network_connection

check_network_connection 是一个用于在 Flutter 应用中检测网络连接状态，并在无互联网连接时显示通知的插件。

描述

check_network_connection 提供了一种简单的方法来测试 Flutter 应用中的网络连接。它允许你检测到互联网连接丢失并显示通知。

安装

要将 check_network_connection 添加到你的项目中，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  check_network_connection: ^0.0.2

然后运行 flutter pub get 来安装该包。

使用示例

下面是一个完整的示例，展示了如何使用 check_network_connection 插件来检测网络连接状态。

// ignore_for_file: depend_on_referenced_packages

import 'package:flutter/material.dart';
import 'package:check_network_connection/check_network_connection.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const CheckNetworkConnection());
}

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

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      ensureScreenSize: true,
      minTextAdapt: true,
      splitScreenMode: true,
      designSize: const Size(360, 720),
      useInheritedMediaQuery: true,
      child: GetMaterialApp(
        title: '网络连接示例',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const HomePage(title: '网络连接示例'),
      ),
    );
  }
}

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

  final String title;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late NetworkConnectionDialog networkConnectionDialog;

  @override
  void initState() {
    networkConnectionDialog = NetworkConnectionDialog(
        title: const Text('无网络连接'),
        content: const Text("检查网络设置并重试。"),
        btnCancel: const Text("重新尝试"),
        btnSetting: const Text("前往设置"),
        titleStyle: TextStyle(fontSize: 20.sp),
        contentStyle: TextStyle(fontSize: 14.sp),
        boxDecorationBtnRetry: const BoxDecoration(color: Colors.red));

    networkConnectionDialog.onInit();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '请启用/禁用移动数据和Wi-Fi以查看更改',
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的库：

   import 'package:flutter/material.dart';
   import 'package:check_network_connection/check_network_connection.dart';
   import 'package:get/get.dart';
   import 'package:flutter_screenutil/flutter_screenutil.dart';
   

2. 初始化应用：

   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
     runApp(const CheckNetworkConnection());
   }
   

3. 创建主应用类：

   class CheckNetworkConnection extends StatelessWidget {
     const CheckNetworkConnection({super.key});
   
     @override
     Widget build(BuildContext context) {
       return ScreenUtilInit(
         ensureScreenSize: true,
         minTextAdapt: true,
         splitScreenMode: true,
         designSize: const Size(360, 720),
         useInheritedMediaQuery: true,
         child: GetMaterialApp(
           title: '网络连接示例',
           theme: ThemeData(
             colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
             useMaterial3: true,
           ),
           home: const HomePage(title: '网络连接示例'),
         ),
       );
     }
   }
   

4. 创建主页类：

   class HomePage extends StatefulWidget {
     const HomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<HomePage> createState() => _HomePageState();
   }
   

5. 实现主页状态类：

   class _HomePageState extends State<HomePage> {
     late NetworkConnectionDialog networkConnectionDialog;
   
     @override
     void initState() {
       networkConnectionDialog = NetworkConnectionDialog(
           title: const Text('无网络连接'),
           content: const Text("检查网络设置并重试。"),
           btnCancel: const Text("重新尝试"),
           btnSetting: const Text("前往设置"),
           titleStyle: TextStyle(fontSize: 20.sp),
           contentStyle: TextStyle(fontSize: 14.sp),
           boxDecorationBtnRetry: const BoxDecoration(color: Colors.red));
   
       networkConnectionDialog.onInit();
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: const Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Text(
                 '请启用/禁用移动数据和Wi-Fi以查看更改',
               ),
             ],
           ),
         ),
       );
     }
   }