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

当您的互联网连接不可用时，显示一个MaterialBanner。

功能

internet_checker_banner会在您的Internet连接不良或不可用时显示一个MaterialBanner，并在连接可用时关闭它。该插件会确定设备是否当前连接到全球网络（具有访问Internet的权限）。

截图

开始使用

请按照以下步骤开始使用该插件。

1. 在pubspec.yaml中添加最新版本的插件并运行dart pub get：

dependencies:
  internet_checker_banner: ^0.0.4

2. 导入插件并在您的Flutter应用中使用：

import 'package:internet_checker_banner/internet_checker_banner.dart';

使用方法

在`initState()`函数中初始化`internet_checker_banner`。

InternetCheckerBanner().initialize(
  context,
  title: "No internet access", // 设置标题
);

不要忘记在`dispose()`函数中释放资源。

[@override](/user/override)
void dispose() {
  InternetCheckerBanner().dispose();
  super.dispose();
}

完整示例代码：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

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

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

  // 初始化internet_checker_banner
  [@override](/user/override)
  void initState() {
    // TODO: 实现initState
    InternetCheckerBanner().initialize(
      context,
      title: "No internet access", // 设置无网络时的提示标题
    );
    super.initState();
  }

  // 释放internet_checker_banner资源
  [@override](/user/override)
  void dispose() {
    // TODO: 实现dispose
    InternetCheckerBanner().dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // 这个逗号使自动格式化更美观
    );
  }
}