Flutter实现：为设备状态栏添加活动/进度指示器

嘿，我刚好有几个靠谱的方案能帮你解决这个问题，不用再纠结那个过时且只支持iOS的包啦！

方案1：用维护活跃的第三方包快速实现 #

推荐flutter_statusbar_progress这个包，它支持iOS和Android双平台，更新也比较及时，能直接实现类似Telegram X的状态栏进度指示器效果。

• 第一步，在pubspec.yaml里添加依赖：

dependencies:
  flutter_statusbar_progress: ^最新版本号 # 记得换成当前最新版本

• 然后在代码里调用就行：

import 'package:flutter_statusbar_progress/flutter_statusbar_progress.dart';

// 显示进度，进度值范围是0到1（比如0.5就是50%）
FlutterStatusbarProgress.setProgress(0.5);

// 进度完成后隐藏指示器
FlutterStatusbarProgress.hideProgress();

还能自定义进度条颜色，比如改成你项目的主题色：

FlutterStatusbarProgress.setProgress(0.5, color: Colors.yellow);

方案2：自定义Overlay实现（无第三方依赖，完全可控） #

如果不想依赖第三方包，也可以用Flutter自带的Overlay自己实现，样式完全由你说了算：

1. 先写两个全局方法来管理进度条的显示和隐藏：

OverlayEntry? _statusBarProgressOverlay;

void showStatusBarProgress(BuildContext context, double progress) {
  // 如果已有进度条，先移除旧的
  _statusBarProgressOverlay?.remove();

  _statusBarProgressOverlay = OverlayEntry(
    builder: (context) => Positioned(
      top: 0,
      left: 0,
      right: 0,
      // 高度设为状态栏的高度
      height: MediaQuery.of(context).padding.top,
      child: Container(
        color: Colors.transparent,
        // 把进度条贴在状态栏顶部
        child: Align(
          alignment: Alignment.topLeft,
          child: Container(
            height: 2, // 进度条高度
            width: MediaQuery.of(context).size.width * progress,
            color: Colors.blue, // 进度条颜色
          ),
        ),
      ),
    ),
  );

  // 插入到Overlay中显示
  Overlay.of(context)?.insert(_statusBarProgressOverlay!);
}

void hideStatusBarProgress() {
  _statusBarProgressOverlay?.remove();
  _statusBarProgressOverlay = null;
}

2. 使用的时候直接调用：

// 显示50%的进度
showStatusBarProgress(context, 0.5);

// 操作完成后隐藏
hideStatusBarProgress();

这种方式的好处是你可以随便改样式——比如把进度条改成渐变的、调整高度、加动画效果，完全贴合你的项目需求。

方案3：结合系统UI设置和页面布局 #

如果想要进度条和状态栏融合得更自然，还可以把状态栏设为透明，然后在页面顶部放进度条，视觉上就像在状态栏里一样：

// 先设置状态栏为透明
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  statusBarIconBrightness: Brightness.dark, // 根据进度条颜色调整图标亮度
));

// 然后在页面布局里添加进度条
Scaffold(
  body: Column(
    children: [
      Container(
        // 高度是状态栏高度加进度条高度
        height: MediaQuery.of(context).padding.top + 2,
        child: Align(
          alignment: Alignment.topLeft,
          child: Container(
            height: 2,
            width: MediaQuery.of(context).size.width * 0.5,
            color: Colors.blue,
          ),
        ),
      ),
      // 页面的其他内容
      Expanded(
        child: Center(child: Text('页面内容')),
      ),
    ],
  ),
);

这种方式需要注意适配不同设备的状态栏高度，用MediaQuery.of(context).padding.top就能搞定所有机型啦。

内容的提问来源于stack exchange，提问作者Rehmat Singh Gill