Flutter：如何自定义AppBar并为每个页面单独设置状态栏颜色？

问题核心原因 #

你遇到的问题根源在于：

• 当页面存在AppBar时，Flutter默认会让状态栏颜色继承AppBar的backgroundColor，此时AppBar的systemOverlayStyle.statusBarColor会被忽略，这就是你直接在AppBar里设置无效的原因。
• 用SystemChrome.setSystemUIOverlayStyle是全局级别的设置，一旦调用就会覆盖所有页面的状态栏样式，所以导致所有AppBar颜色统一。

正确解决方案 #

方案1：状态栏与AppBar同色（最常用）

直接给每个页面的AppBar设置backgroundColor，同时设置elevation: 0移除状态栏下方的灰色阴影，状态栏会自动同步这个颜色，每个页面独立生效：

• Screen A（绿色状态栏）：

AppBar(
  elevation: 0,
  backgroundColor: Colors.green,
)

• Screen B（红色状态栏）：

AppBar(
  elevation: 0,
  backgroundColor: Colors.redAccent,
)

• Screen C（黄色状态栏）：

AppBar(
  elevation: 0,
  backgroundColor: Colors.yellow,
)

方案2：状态栏与AppBar颜色不同（特殊场景）

如果需要状态栏和AppBar使用不同颜色，需要开启Scaffold的extendBodyBehindAppBar，让页面内容延伸到状态栏下方，再通过AppBar的systemOverlayStyle单独设置状态栏颜色：

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.blue, // AppBar自身的颜色
    systemOverlayStyle: const SystemUiOverlayStyle(
      statusBarColor: Colors.redAccent, // 单独设置状态栏颜色
      statusBarIconBrightness: Brightness.light, // 根据状态栏颜色设置图标亮度，确保可见
    ),
  ),
  body: Container(
    // 给页面内容添加顶部内边距，避免被状态栏遮挡
    padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
    child: ...,
  ),
)

注意事项 #

• 避免用SystemChrome.setSystemUIOverlayStyle做页面级样式设置，全局设置容易引发页面切换时的样式冲突或闪烁问题。
• 使用方案2时，必须给页面内容添加顶部内边距，防止内容被状态栏遮挡。

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