Flutter如何重置状态栏颜色？模态底部弹窗时状态栏显示异常

我明白你遇到的困扰——自定义了状态栏和AppBar同色后，弹出模态底部弹窗时，状态栏居然浮在深色遮罩上方，完全破坏了整体的遮罩效果，而且试了statusBarColor: null也没起作用？别慌，我来给你几个实用的解决方案：

方案1：弹窗前后动态切换状态栏样式 #

核心思路是：在弹出弹窗前，临时修改状态栏颜色让它被遮罩覆盖，弹窗关闭后再恢复原来的自定义颜色。之所以statusBarColor: null没用，是因为它在Flutter里代表“保持当前状态栏颜色不变”，而非重置为默认。

示例代码：

// 先保存原本的状态栏颜色
final originalStatusBarColor = myAppBarColor;

// 弹窗弹出前，将状态栏设为透明（让遮罩能覆盖它）
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  // 如果你的遮罩是深色，记得把状态栏图标设为浅色，避免看不清
  statusBarIconBrightness: Brightness.light,
));

// 弹出模态底部弹窗
await showModalBottomSheet(
  context: context,
  barrierColor: Colors.black54, // 你的遮罩颜色
  builder: (context) {
    return Container(
      height: 250,
      padding: const EdgeInsets.all(16),
      child: const Center(child: Text('弹窗内容')),
    );
  },
);

// 弹窗关闭后，恢复原来的状态栏颜色
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: originalStatusBarColor,
  // 恢复原来的图标亮度
  statusBarIconBrightness: Brightness.dark,
));

方案2：用AnnotatedRegion自动管理样式 #

这是更优雅的方式，不需要手动处理弹窗前后的状态切换。通过AnnotatedRegion包裹弹窗内容，它会在弹窗显示时自动应用指定的系统UI样式，弹窗销毁后自动恢复之前的样式。

示例代码：

showModalBottomSheet(
  context: context,
  barrierColor: Colors.black54,
  builder: (context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.light,
      ),
      child: Container(
        height: 250,
        padding: const EdgeInsets.all(16),
        child: const Center(child: Text('弹窗内容')),
      ),
    );
  },
);

额外提示 #

如果想彻底重置为系统默认的状态栏颜色，可以通过主题获取默认值：

final defaultStatusBarColor = Theme.of(context).appBarTheme.systemOverlayStyle?.statusBarColor ?? Theme.of(context).primaryColor;

然后把这个值用在弹窗关闭后的恢复代码里即可。

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