Flutter网络可用性检测插件internet_availability的使用

一个用于检查网络可用性的 Flutter 包。如果网络不可用，该插件会在当前路由上添加一个新的页面。一旦网络可用，该页面会自动弹出到之前的路由。

注意: 该插件仅在使用 go_router 时才有效。

功能

开始使用

在你的项目中添加 internet_availability 插件：

flutter pub add internet_availability

然后运行以下命令以获取新的依赖项：

flutter pub get

使用方法

步骤 1: 在 routes 列表中添加一个新的路由

在你的路由列表中添加一个路由，该路由指向无网络页面。

GoRoute(
  path: NoInternetPage.routeName,
  builder: (context, state) => const NoInternetPage(),
),

这里的路径可以是任意值，并且你可以为 builder 属性提供任何你自己的小部件。

步骤 2: 添加 redirect 和 refreshListenable 属性

在 GoRouter 中添加 redirect 和 refreshListenable 属性，并粘贴以下代码：

redirect: (context, state) {
  switch (InternetAvailabilityConfig.showNoInternetPage()) {
    case true:
      InternetAvailabilityConfig.prevRoute = state.subloc;
      return NoInternetPage.routeName; // 页面路径
    case false:
      return InternetAvailabilityConfig.prevRoute;
    default:
      return null;
  }
},
refreshListenable: RefreshStream(
  InternetAvailabilityConfig.internetAvailabilityCubit.stream),

注意: 对于 go_router 版本低于 5.0 的用户，请使用 GoRouterRefreshStream 并且 redirect 只接受 state 作为参数。

refreshListenable: GoRouterRefreshStream(
  InternetAvailabilityConfig.internetAvailabilityCubit.stream),

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_web_plugins/url_strategy.dart';
import 'package:go_router/go_router.dart';
import 'package:internet_availability/internet_availability.dart';

final GoRouter router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => const Page1(),
    ),
    GoRoute(
      path: NoInternetPage.routeName,
      builder: (context, state) => const NoInternetPage(),
    ),
  ],
  redirect: (context, state) {
    switch (InternetAvailabilityConfig.showNoInternetPage()) {
      case true:
        InternetAvailabilityConfig.prevRoute = state.subloc;
        return NoInternetPage.routeName;
      case false:
        return InternetAvailabilityConfig.prevRoute;
      default:
        return null;
    }
  },
  refreshListenable: RefreshStream(
      InternetAvailabilityConfig.internetAvailabilityCubit.stream),
);

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

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

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

class Page1 extends StatelessWidget {
  static const String routeName = '/';
  const Page1({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('Page 1'),
      ),
    );
  }
}