Flutter实现全局统一显示网络连接状态提示容器方案

问题背景 #

当前使用internet_connection_checker包实现网络状态提示，但需要在每个页面重复编写监听逻辑和UI代码，希望实现全局统一的提示，无需页面级重复编码。

全局解决方案实现步骤 #

1. 封装全局网络状态服务（单例）

创建单例服务统一管理网络状态流，避免重复初始化监听：

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

class NetworkService {
  // 单例实现
  static final NetworkService _instance = NetworkService._internal();
  factory NetworkService() => _instance;
  NetworkService._internal();

  final _internetStatusController = StreamController<bool>.broadcast();
  // 对外暴露网络状态流
  Stream<bool> get internetStatusStream => _internetStatusController.stream;

  // 初始化网络监听
  void init() {
    InternetConnectionChecker().onStatusChange.listen((status) {
      final hasInternet = status == InternetConnectionStatus.connected;
      _internetStatusController.add(hasInternet);
    });
  }

  // 销毁流，避免内存泄漏
  void dispose() {
    _internetStatusController.close();
  }
}

2. 实现全局网络提示Widget

创建一个包裹性Widget，自动根据网络状态显示/隐藏提示栏：

import 'package:flutter/material.dart';
import 'package:your_app_name/network_service.dart'; // 替换为你的服务路径

class NetworkStatusBar extends StatelessWidget {
  final Widget child;
  const NetworkStatusBar({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<bool>(
      stream: NetworkService().internetStatusStream,
      initialData: true, // 默认假设有网，可根据需求调整
      builder: (context, snapshot) {
        final hasInternet = snapshot.data ?? true;
        return Column(
          children: [
            // 仅无网时显示提示栏
            if (!hasInternet)
              Container(
                color: const Color(0xFFE53935), // 警告红色
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 3),
                height: 25,
                width: double.infinity,
                child: const Center(
                  child: Text(
                    "无网络连接",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 15,
                      fontWeight: FontWeight.w400,
                    ),
                  ),
                ),
              ),
            // 承载页面内容
            Expanded(child: child),
          ],
        );
      },
    );
  }
}

3. 在入口处全局包裹应用

在main.dart中初始化网络服务，并将NetworkStatusBar作为所有页面的父容器：

import 'package:flutter/material.dart';
import 'package:your_app_name/network_service.dart';
import 'package:your_app_name/network_status_bar.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化全局网络服务
  NetworkService().init();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      theme: ThemeData(primarySwatch: Colors.blue),
      // 用NetworkStatusBar包裹首页，所有子页面都会继承提示栏
      home: NetworkStatusBar(
        child: const HomePage(), // 替换为你的首页
      ),
    );
  }
}

方案优势 #

• 无重复编码：所有页面自动继承网络提示，无需在每个页面编写监听和UI代码
• 全局统一管理：网络状态流全局唯一，避免多页面重复监听网络
• 自动响应状态变化：StreamBuilder自动监听流更新，无需手动调用setState
• 低侵入性：不影响原有页面结构，仅通过包裹实现功能

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