Flutter网络连接与WiFi管理插件internet_and_wifi的使用

网络连接与WiFi插件

一个新的Flutter包，通过打开到指定地址列表的套接字来检查互联网连接。每个地址可以单独设置端口和超时时间，默认值为方便起见提供。此外，该插件允许Flutter应用发现网络连接并相应地配置自己。它可以区分蜂窝网络与WiFi连接。它还涵盖了当WiFi已连接但没有互联网的情况。

特性

• 检查设备是否连接到互联网。
• 检查设备是否连接到互联网或WiFi。
• 检查当互联网或WiFi已连接但没有互联网的情况。

开始使用

在pubspec.yaml文件中添加该包。

使用方法

在main.dart文件中：

import 'package:flutter/material.dart';
import 'package:internet_and_wifi/src/internet_connection_provider.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider<InternetConnectionProvider>(
            create: (_) => InternetConnectionProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

GlobalKey<NavigatorState> key = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Consumer<InternetConnectionProvider>(
        builder: (context, internetProvider, child) {
      return MaterialApp(
        navigatorKey: key,
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: const ColorScheme.light(primary: Color(0xFF000000)),
          buttonTheme: const ButtonThemeData(textTheme: ButtonTextTheme.primary),
        ),
        home: Builder(builder: (context) {
          return const Home();
        }),
        routes: <String, WidgetBuilder>{
          "/home": (context) => const Home(),
        },
      );
    });
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(body: Container());
  }
}

完整示例Demo

下面是一个完整的示例，展示了如何使用internet_and_wifi插件来检查网络连接状态，并根据连接状态显示不同的页面。

import 'package:flutter/material.dart';
import 'package:internet_and_wifi/src/internet_connection_provider.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider<InternetConnectionProvider>(
            create: (_) => InternetConnectionProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

GlobalKey<NavigatorState> key = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Consumer<InternetConnectionProvider>(
        builder: (context, internetProvider, child) {
      return MaterialApp(
        navigatorKey: key,
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: const ColorScheme.light(primary: Color(0xFF000000)),
          buttonTheme: const ButtonThemeData(textTheme: ButtonTextTheme.primary),
        ),
        home: Builder(builder: (context) {
          // 根据网络连接状态决定显示哪个页面
          if (internetProvider.isOnline) {
            return const HomePage();
          } else {
            return const NoInternetPage();
          }
        }),
        routes: <String, WidgetBuilder>{
          "/home": (context) => const HomePage(),
          "/no-internet": (context) => const NoInternetPage(),
        },
      );
    });
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(child: Text('You are online!')),
    );
  }
}

class NoInternetPage extends StatelessWidget {
  const NoInternetPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('No Internet Page')),
      body: Center(child: Text('You are offline!')),
    );
  }
}