flutter_no_internet_widget_v2 是一个用于在 Flutter 应用中检测网络连接状态并显示无网络提示的插件。它可以帮助你在应用中优雅地处理无网络的情况，并提供一个用户友好的界面来提示用户当前没有网络连接。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_no_internet_widget_v2 插件的依赖：

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

然后运行 flutter pub get 来安装插件。

使用插件

1. 导入插件

   在你的 Dart 文件中导入插件：

   import 'package:flutter_no_internet_widget_v2/flutter_no_internet_widget_v2.dart';
   

2. 包裹你的应用

   使用 NoInternetWidget 包裹你的应用或某个页面。NoInternetWidget 会自动检测网络连接状态，并在无网络时显示一个默认的提示界面。

   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         home: NoInternetWidget(
           child: HomePage(),
         ),
       );
     }
   }
   
   class HomePage extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Home Page'),
         ),
         body: Center(
           child: Text('Welcome to the Home Page!'),
         ),
       );
     }
   }
   

3. 自定义无网络提示界面

   你可以通过 noInternetBuilder 参数来自定义无网络时显示的界面。例如：

   NoInternetWidget(
     child: HomePage(),
     noInternetBuilder: (context) {
       return Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             Icon(Icons.signal_wifi_off, size: 50, color: Colors.red),
             SizedBox(height: 20),
             Text('No Internet Connection', style: TextStyle(fontSize: 20)),
           ],
         ),
       );
     },
   )
   

4. 自定义网络连接检测

   你可以通过 connectionChecker 参数来自定义网络连接的检测逻辑。默认情况下，插件会使用 connectivity_plus 插件来检测网络连接状态。

   NoInternetWidget(
     child: HomePage(),
     connectionChecker: () async {
       // 自定义网络连接检测逻辑
       return await MyCustomConnectionChecker.isConnected();
     },
   )
   

5. 其他配置

   • retryButtonText: 自定义重试按钮的文本。
   • retryButtonStyle: 自定义重试按钮的样式。
   • retryCallback: 自定义重试按钮的回调函数。

   NoInternetWidget(
     child: HomePage(),
     retryButtonText: 'Try Again',
     retryButtonStyle: ButtonStyle(
       backgroundColor: MaterialStateProperty.all(Colors.blue),
     ),
     retryCallback: () {
       print('Retry button clicked');
     },
   )
   

示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NoInternetWidget(
        child: HomePage(),
        noInternetBuilder: (context) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(Icons.signal_wifi_off, size: 50, color: Colors.red),
                SizedBox(height: 20),
                Text('No Internet Connection', style: TextStyle(fontSize: 20)),
              ],
            ),
          );
        },
        retryButtonText: 'Try Again',
        retryButtonStyle: ButtonStyle(
          backgroundColor: MaterialStateProperty.all(Colors.blue),
        ),
        retryCallback: () {
          print('Retry button clicked');
        },
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Welcome to the Home Page!'),
      ),
    );
  }
}