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

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

使用此插件可以检查互联网连接，并且可以监听连接状态的变化。此外，该插件还允许用户通过ping Google来检测应用的互联网连接情况。

为了充分利用该插件的功能，应该将其放在根小部件中。例如：

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

  // 这是您的应用程序的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ConnectivityScreen(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        scaffoldMessengerKey: messengerKey,
        home: const MyHomePage(title: '您的应用'),
      ),
    );
  }
}

工具函数

使用 useProvider(BuildContext context)

您可以使用该函数在互联网检查器包内访问连接提供程序。

  [@override](/user/override)
  initState() {
    super.initState();
    useProvider(context)
        .monitorConnection(internetAvailableCallback: internetAvailable, internetUnAvailableCallback: internetUnAvailable);
  }

监控连接

monitorConnection 函数允许用户监控互联网连接状态。当设备的连接状态发生变化时，该函数会调用另一个方法来ping Google以检查互联网连接是否已恢复。

• 您可以在 internetUnAvailable 参数中传递一个回调函数（如上所示），以便在互联网连接变化且互联网不可用时执行某些任务。
• 您还可以在 internetAvailable 参数中传递另一个回调函数，以便在互联网可用时执行操作。

通知

notify 函数可用于在设备的互联网连接发生变化时通知更改。

    useProvider(context).notify(() {
        messengerKey.currentState?.clearSnackBars();
    });

在线标志

维护一个标志，以便用户可以知道设备的互联网状态。您可以像下面这样访问该标志。

    final hasInternet = useProvider(context).isOnline;
    // 当设备有互联网时执行某些操作
    if (hasInternet) {
        print("互联网已恢复");
    }

静态URL配置

URL在 AppConstant 中进行维护。您可以更改URL以ping特定的URL，例如后端。如果未更改URL，则应用将ping Google服务器。

    void main() {
        AppConstant.url = "binitkoirala.com.np";
        runApp(const MyApp());
    }

完整示例代码

以下是一个完整的示例代码，展示了如何使用 simple_internet_checker 插件。

import 'package:flutter/material.dart';
import 'package:simple_internet_checker/simple_internet_checker.dart';
import 'package:simple_internet_checker/src/screen/connectivity_screen.dart';

import './settings_screen.dart';

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

final messengerKey = GlobalKey<ScaffoldMessengerState>();

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

  // 这是您的应用程序的根小部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ConnectivityScreen(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        scaffoldMessengerKey: messengerKey,
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
        // : const NoInternet();
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text("无互联网连接"),
      ),
    );
  }
}

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> {
  internetUnAvailable() {
    messengerKey.currentState?.showSnackBar(
      const SnackBar(
        content: Text("无互联网连接"),
        backgroundColor: Colors.red,
        duration: Duration(hours: 10),
      ),
    );

    // 可以使用导航键导航到适当的屏幕
  }

  internetAvailable() {
    messengerKey.currentState?.clearSnackBars();
    // 可以使用导航键导航到适当的屏幕
  }

  [@override](/user/override)
  initState() {
    super.initState();
    useProvider(context).monitorConnection(
        internetAvailableCallback: internetAvailable,
        internetUnAvailableCallback: internetUnAvailable);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(
          '互联网检查器',
          style: Theme.of(context).textTheme.headlineMedium,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // onPressed: _incrementCounter,
        onPressed: () async {
          final hasInternet = useProvider(context).isOnline;

          if (hasInternet) {
            useProvider(context).notify(() {
              // 可以调用remove方法清除snackbar
              messengerKey.currentState?.clearSnackBars();
              // 可以调用navigator键导航到特定屏幕
            });
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (_) => const SettingsScreen(),
              ),
            );
          }
        },
        tooltip: '增加',
        child: Icon(
          Icons.adaptive.arrow_forward_outlined,
        ),
      ),
    );
  }
}