Flutter中监听全局网络断开并弹出对话框实现方案咨询

当然可以实现，以下是具体的实现思路和代码示例：

1. 引入依赖 #

首先在pubspec.yaml中添加connectivity_plus依赖，用于监听网络状态：

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

2. 封装全局网络管理类 #

通过Overlay实现无需页面上下文的全局弹窗，同时避免重复弹出：

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

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

  final Connectivity _connectivity = Connectivity();
  bool _isDialogShown = false;
  OverlayEntry? _overlayEntry;

  // 初始化网络监听
  void init() {
    _connectivity.onConnectivityChanged.listen(_onNetworkChanged);
  }

  // 网络状态变化处理
  void _onNetworkChanged(ConnectivityResult result) {
    if (result == ConnectivityResult.none) {
      _showNoNetworkDialog();
    } else {
      _hideNoNetworkDialog();
    }
  }

  // 显示断网提示弹窗
  void _showNoNetworkDialog() {
    if (_isDialogShown) return;
    _isDialogShown = true;

    _overlayEntry = OverlayEntry(
      builder: (context) => Material(
        color: Colors.black.withOpacity(0.5),
        child: Center(
          child: Container(
            width: 280,
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Icon(Icons.signal_wifi_off, size: 48, color: Colors.red),
                const SizedBox(height: 16),
                const Text(
                  "网络连接断开",
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 8),
                const Text(
                  "请检查你的网络连接状态",
                  style: TextStyle(fontSize: 14, color: Colors.grey),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: _hideNoNetworkDialog,
                  child: const Text("知道了"),
                ),
              ],
            ),
          ),
        ),
      ),
    );

    WidgetsBinding.instance.addPostFrameCallback((_) {
      Overlay.of(WidgetsBinding.instance.context!)?.insert(_overlayEntry!);
    });
  }

  // 隐藏断网弹窗
  void _hideNoNetworkDialog() {
    if (!_isDialogShown) return;
    _isDialogShown = false;
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  // 销毁监听资源
  void dispose() {
    _connectivity.dispose();
    _hideNoNetworkDialog();
  }
}

3. 全局初始化 #

在应用入口启动时初始化网络管理器，确保监听全局生效：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  NetworkManager().init();
  runApp(const MyApp());
}

注意事项 #

• 权限配置：
  • Android：在AndroidManifest.xml中添加权限

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    

  • iOS：在Info.plist中添加网络配置

    <key>NSAppTransportSecurity</key>
    <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
    </dict>
    

• 重复弹窗控制：通过_isDialogShown标记避免网络状态频繁切换时重复弹出弹窗。

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