Flutter无网络连接提示插件no_internet_connection_widget的使用

NoInternetConnectionWidget

一个"No Internet Connection"（无互联网连接）的小部件是一个图形用户界面元素或通知，出现在设备屏幕上以告知用户其设备当前未连接到互联网。此小部件通常会显示一个独特的图标或符号，以及一条指示没有互联网连接的消息。其目的是提醒用户缺乏网络连接，帮助他们理解为什么某些在线功能或服务可能无法访问。用户可以在各种设备上遇到此小部件，如智能手机、平板电脑或计算机，它作为视觉提示，用于排查网络问题或寻求稳定的互联网连接。

安装

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

dependencies:
  no_internet_connection_widget: 1.0.1

使用/示例

以下是一个简单的示例，展示了如何使用no_internet_connection_widget插件来检测网络连接状态，并在没有网络连接时显示相应的提示信息。

import 'package:flutter/material.dart';
import 'package:no_internet_connection_widget/check_internet_connection_widget.dart';
import 'package:no_internet_connection_widget/no_internet_controller.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: const 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(() {
      // 调用setState告诉Flutter框架有某些东西发生了变化，这将导致重新运行build方法，以便更新显示。
      _counter++;
    });
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    // 开始监听网络连接的变化
    noInternetController.listen();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CheckInternetConnection(
      whenOffline: const Text("No Internet connection"), // 当离线时显示的文本（可选）
      child: 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: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}