Flutter应用全局持续检测网络连接并展示告警方案咨询

实现思路 #

用connectivity_plus监听网络状态，通过全局Overlay实现跨页面的告警提示，无需在每个页面重复编码。核心是单例的网络状态管理器+全局Overlay的动态控制。

步骤1：添加依赖 #

在pubspec.yaml中引入依赖：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^5.0.1 # 可替换为最新稳定版

执行flutter pub get完成依赖安装。

步骤2：创建全局网络状态管理器 #

新建单例类NetworkManager，负责监听网络状态并对外暴露状态流：

import 'dart:async';
import 'package:connectivity_plus/connectivity_plus.dart';

class NetworkManager {
  static final NetworkManager _instance = NetworkManager._internal();
  factory NetworkManager() => _instance;
  NetworkManager._internal();

  final Connectivity _connectivity = Connectivity();
  late StreamSubscription<ConnectivityResult> _subscription;
  final StreamController<bool> _networkStatusController = StreamController.broadcast();
  Stream<bool> get networkStatusStream => _networkStatusController.stream;

  bool _isOnline = true;
  bool get isOnline => _isOnline;

  // 初始化网络监听
  void init() async {
    // 获取初始网络状态
    final result = await _connectivity.checkConnectivity();
    _updateStatus(result);
    // 持续监听状态变化
    _subscription = _connectivity.onConnectivityChanged.listen(_updateStatus);
  }

  void _updateStatus(ConnectivityResult result) {
    final newStatus = result != ConnectivityResult.none;
    if (newStatus != _isOnline) {
      _isOnline = newStatus;
      _networkStatusController.add(newStatus);
    }
  }

  // 销毁监听资源
  void dispose() {
    _subscription.cancel();
    _networkStatusController.close();
  }
}

步骤3：在main中实现全局告警逻辑 #

在main.dart中初始化NetworkManager，通过Overlay动态添加/移除告警提示：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final NetworkManager _networkManager = NetworkManager();
  OverlayEntry? _overlayEntry;
  Timer? _dismissTimer;

  @override
  void initState() {
    super.initState();
    _networkManager.init();
    _listenToNetworkChanges();
  }

  void _listenToNetworkChanges() {
    _networkManager.networkStatusStream.listen((isOnline) {
      if (!isOnline) {
        // 网络断开，显示告警
        _showOfflineAlert();
      } else {
        // 网络恢复，显示提示并自动消失
        _showOnlineAlert();
      }
    });
  }

  void _showOfflineAlert() {
    _dismissTimer?.cancel();
    _overlayEntry?.remove();
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: 0, // 改为bottom:0可切换到底部显示
        left: 0,
        right: 0,
        child: Material(
          color: Colors.red[700],
          child: const Padding(
            padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
            child: Text(
              "Internet is Disconnected",
              style: TextStyle(color: Colors.white, fontSize: 14),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
    Overlay.of(context).insert(_overlayEntry!);
  }

  void _showOnlineAlert() {
    _overlayEntry?.remove();
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: Material(
          color: Colors.green[600],
          child: const Padding(
            padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
            child: Text(
              "Internet is Active",
              style: TextStyle(color: Colors.white, fontSize: 14),
              textAlign: TextAlign.center,
            ),
          ),
        ),
      ),
    );
    Overlay.of(context).insert(_overlayEntry!);
    // 3秒后自动隐藏提示
    _dismissTimer = Timer(const Duration(seconds: 3), () {
      _overlayEntry?.remove();
      _overlayEntry = null;
    });
  }

  @override
  void dispose() {
    _networkManager.dispose();
    _dismissTimer?.cancel();
    _overlayEntry?.remove();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network Monitor Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

// 示例主页
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: const Center(child: Text('Main Content')),
    );
  }
}

关键说明 #

• 单例管理器：确保整个APP只有一个网络监听实例，避免资源浪费
• 全局Overlay：无需修改页面结构，直接在顶层添加提示条，所有页面都能看到
• 自动消失逻辑：网络恢复后用Timer控制提示3秒后移除，不干扰用户操作
• 状态防抖：NetworkManager中只在状态变化时发送事件，避免重复提示

可选优化 #

• 给告警条添加滑入滑出动画提升视觉体验
• 通过参数配置支持切换顶部/底部显示位置
• 补充iOS/Android平台的权限声明（connectivity_plus在部分系统需要权限）

内容的提问来源于stack exchange，提问作者Shreyansh Sharma