Flutter网络状态检测插件no_internet_check的使用

no_internet_check

一个依赖于internet_connection_checker和flutter_toast的Flutter包。该包用于检查互联网连接。如果没有互联网连接，它会显示一个无互联网页面。如果有互联网连接，则返回到前一个屏幕。

注意，此插件只是一个测试。您可以fork它并进行改进。

快速开始

您可以参考示例代码。

在MaterialApp中添加以下行（如果您使用自己的键，请添加相应的键）：

navigatorKey: NavigationService.navigationKey,

在启动屏幕或应用程序的第一个屏幕上调用此方法。如果您在主方法中使用await，也可以将此代码粘贴到主方法中。（如果您使用自己的键，请将其传递给构造函数）

InternetChecker(); // 可选：您可以传递自定义的无互联网页面作为参数

完成以上步骤后，您的设置就完成了。

如果您使用的是自定义的无互联网页面，并且具有弹出功能，请在弹出之前添加以下行：

IndexClass.index = 0;

如果在启动屏幕中调用自动登录API，请（如果您使用自己的键，请将其传递给navigateTo()构造函数）

if (IndexClass.index == 0) {  // 有互联网
  checkAutoLogin();
} else { // 没有互联网
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
    NavigationService.navigateTo().then((value) {
      checkAutoLogin(); 
    });
  });
}

示例代码

以下是示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      navigatorKey: NavigationService.navigationKey, // 添加此行
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

  [@override](/user/override)
  void initState() {
    InternetChecker(); // 添加此行
    super.initState();
  }

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

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