Flutter中如何在MaterialApp导航器上层覆盖全局网络断开提示Widget？

核心思路 #

直接在Modular的根组件外层用Stack包裹网络提示层，同时监听网络状态变化，让提示层能在所有路由页面之上动态显示/隐藏。

具体实现步骤 #

1. 封装网络状态监听 #

用connectivity_plus包实现网络状态的实时监听（先在pubspec.yaml里添加依赖）：

import 'package:connectivity_plus/connectivity_plus.dart';

class NetworkMonitor {
  final Connectivity _connectivity = Connectivity();
  // 暴露网络状态流
  Stream<ConnectivityResult> get networkStream => _connectivity.onConnectivityChanged;
}

2. 用Stack包裹Modular根组件 #

在main.dart里，把ModularApp和网络提示层放到同一个Stack中，通过StreamBuilder监听网络状态来控制提示层的显示：

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<ConnectivityResult>(
      stream: NetworkMonitor().networkStream,
      initialData: ConnectivityResult.wifi, // 初始状态可根据实际情况调整
      builder: (ctx, snapshot) {
        bool isOffline = snapshot.data == ConnectivityResult.none;
        
        return Stack(
          children: [
            // Modular的核心导航组件
            ModularApp(
              module: AppModule(),
              child: const MaterialApp.router(
                title: 'App Name',
                routerDelegate: Modular.routerDelegate,
                routeInformationParser: Modular.routeInformationParser,
              ),
            ),
            // 网络断开提示层，仅在离线时显示
            if (isOffline)
              Container(
                color: Colors.black.withOpacity(0.6),
                width: double.infinity,
                height: double.infinity,
                child: Center(
                  child: Container(
                    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    child: const Text(
                      '网络连接已断开，请检查网络后重试',
                      style: TextStyle(color: Colors.redAccent, fontSize: 16),
                    ),
                  ),
                ),
              ),
          ],
        );
      },
    );
  }
}

3. 可选优化 #

• 防抖处理：添加短暂延迟，避免网络波动导致提示频繁弹出，比如用Future.delayed结合状态判断
• 动画过渡：给提示层加入渐显渐隐动画，提升用户体验
• 交互优化：如果需要，可添加关闭按钮，但建议网络未恢复时保持提示显示

方案优势 #

这种方式不需要修改Modular的路由逻辑，直接通过Flutter的基础组件Stack实现层级覆盖，配合StreamBuilder实时响应网络状态变化，确保在任何路由页面都能及时显示离线提示。

内容的提问来源于stack exchange，提问作者Rahul Kavati