如何在Flutter中实现类似Facebook Lite的断网提示及验证connectivity_plus能力

一、实现断网提示的具体方案 #

要实现类似Facebook Lite的全局断网提示，核心是实时监听网络状态+验证实际连通性+全局提示组件，具体步骤如下：

1. 依赖准备 #

在pubspec.yaml中添加所需依赖：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^4.0.0
  http: ^1.1.0

2. 网络状态管理类 #

封装一个单例类，同时监听硬件连接状态、验证实际互联网连通性：

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

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

  final Connectivity _connectivity = Connectivity();
  final StreamController<bool> _networkStatusController = StreamController.broadcast();

  Stream<bool> get networkStatusStream => _networkStatusController.stream;

  void init() {
    _connectivity.onConnectivityChanged.listen(_onConnectivityChanged);
    // 初始化时立即检测一次网络
    _checkActualConnection();
  }

  Future<void> _onConnectivityChanged(ConnectivityResult result) async {
    await _checkActualConnection();
  }

  // 验证是否有实际互联网访问能力
  Future<void> _checkActualConnection() async {
    bool hasValidInternet = false;
    try {
      // 请求一个稳定的公共接口验证连通性
      final response = await http.get(Uri.parse('https://www.baidu.com'));
      hasValidInternet = response.statusCode == 200;
    } catch (_) {
      hasValidInternet = false;
    }
    _networkStatusController.add(hasValidInternet);
  }

  void dispose() {
    _networkStatusController.close();
  }
}

3. 全局添加断网提示 #

在MaterialApp中通过状态监听，全局显示断网提示条：

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

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();
  bool _isOffline = false;

  @override
  void initState() {
    super.initState();
    _networkManager.init();
    _networkManager.networkStatusStream.listen((hasInternet) {
      setState(() {
        _isOffline = !hasInternet;
      });
    });
  }

  @override
  void dispose() {
    _networkManager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('断网提示示例')),
        body: const Center(child: Text('应用主内容区域')),
        // 全局底部提示条
        persistentFooterButtons: _isOffline
            ? [
                Container(
                  width: double.infinity,
                  color: const Color(0xFFE53935),
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: const Text(
                    '无网络连接，请检查你的网络设置',
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, fontSize: 14),
                  ),
                )
              ]
            : null,
      ),
    );
  }
}

二、关于connectivity_plus包的疑问 #

connectivity_plus只能检测设备是否连接到Wi-Fi/移动数据等硬件网络，无法判断是否有实际的互联网访问能力。比如连接了一个未联网的Wi-Fi热点，该包会返回"已连接"状态，但此时并没有可用网络。

因此必须结合实际的网络请求（如请求公共接口）来验证连通性，才能准确触发无网络提示，避免"假连接"的误判。

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