Flutter实现移动端全局粘性底部离线提示容器

你可以通过以下方式实现全局离线提示，无需在每个页面重复编写代码：

一、使用connectivity_plus包（推荐） #

这是Flutter生态中常用的网络状态监听工具，能快速实现全局离线提示功能。

实现步骤： #

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^5.0.1 # 版本号以最新官方发布为准

2. 在MaterialApp的builder中全局集成离线提示：
   通过StreamBuilder监听网络状态变化，用Stack叠加底部提示容器，所有页面都会自动继承这个全局配置。

示例代码：

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

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

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

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

class _MyAppState extends State<MyApp> {
  late Stream<ConnectivityResult> _connectivityStream;

  @override
  void initState() {
    super.initState();
    // 初始化网络状态监听流
    _connectivityStream = Connectivity().onConnectivityChanged;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Offline Indicator Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      // 全局builder注入离线提示
      builder: (context, child) {
        return StreamBuilder<ConnectivityResult>(
          stream: _connectivityStream,
          initialData: ConnectivityResult.none,
          builder: (context, snapshot) {
            final isOffline = snapshot.data == ConnectivityResult.none;
            return Stack(
              children: [
                // 渲染原页面内容
                child!,
                // 离线状态下显示底部提示条
                if (isOffline)
                  Positioned(
                    left: 0,
                    right: 0,
                    bottom: 0,
                    child: Container(
                      color: Colors.red[700],
                      padding: const EdgeInsets.symmetric(vertical: 8),
                      child: const Center(
                        child: Text(
                          'You are offline',
                          style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500),
                        ),
                      ),
                    ),
                  ),
              ],
            );
          },
        );
      },
      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')),
    );
  }
}

二、补充说明 #

• connectivity_plus仅判断设备的网络连接状态（如WiFi、移动数据是否开启），如果需要验证实际能否访问互联网，可以在网络状态变为连接时，发起一个简单的GET请求（比如访问某个稳定的公共API），根据请求结果调整离线提示的显示逻辑。
• 这种全局注入的方式，所有通过Navigator跳转的页面都会自动显示离线提示，无需额外修改页面代码。

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