Flutter中如何为深浅模式设置不同状态栏颜色（兼容SafeArea）

核心问题原因 #

1. 组件层级错误：把Scaffold嵌套在SafeArea内部时，SafeArea会优先处理状态栏的padding和区域，覆盖AppBar或主题中设置的状态栏样式。
2. 主题配置范围有限：仅在AppBarTheme中设置systemOverlayStyle，只会在存在AppBar的页面生效，无法实现全局覆盖。

解决方案步骤 #

1. 调整组件层级：将SafeArea移至Scaffold的body内

SafeArea的作用是保护页面内容不被系统UI遮挡，只需包裹Scaffold的body区域即可，避免干扰AppBar对状态栏的样式控制。

修改后的首页代码：

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: Theme.of(context).brightness == Brightness.light
              ? const AssetImage('assets/images/lgt_bg.png')
              : const AssetImage('assets/images/drk_bg.png'),
          fit: BoxFit.cover,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: const Text("MnbPub"),
        ),
        // 仅在body区域使用SafeArea
        body: SafeArea(
          child: Container(),
        ),
      ),
    );
  }
}

2. 全局配置状态栏样式：在ThemeData根层级设置systemOverlayStyle

直接在ThemeData的根节点配置systemOverlayStyle，确保所有页面（无论是否有AppBar）都能继承深浅模式对应的状态栏样式。

修改后的主题文件代码：

class LightTheme {
  static final apptheme = ThemeData.light().copyWith(
    // 全局状态栏样式，无AppBar时也生效
    systemOverlayStyle: const SystemUiOverlayStyle(
      statusBarColor: Color.fromARGB(255, 254, 222, 225),
      statusBarIconBrightness: Brightness.light,
      systemNavigationBarColor: Color.fromARGB(255, 254, 222, 225),
      systemNavigationBarIconBrightness: Brightness.light,
    ),
    appBarTheme: const AppBarTheme(
      // 保留AppBar专属样式（可选，若全局已配置可省略）
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Color.fromARGB(255, 254, 222, 225),
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Color.fromARGB(255, 254, 222, 225),
        systemNavigationBarIconBrightness: Brightness.light,
      ),
      // 其他AppBar配置...
    ),
    // 其他主题配置...
  );
}

// 深色主题对应配置
class DarkTheme {
  static final apptheme = ThemeData.dark().copyWith(
    systemOverlayStyle: const SystemUiOverlayStyle(
      statusBarColor: Color.fromARGB(255, 30, 30, 30),
      statusBarIconBrightness: Brightness.light,
      systemNavigationBarColor: Color.fromARGB(255, 30, 30, 30),
      systemNavigationBarIconBrightness: Brightness.light,
    ),
    appBarTheme: const AppBarTheme(
      systemOverlayStyle: SystemUiOverlayStyle(
        statusBarColor: Color.fromARGB(255, 30, 30, 30),
        statusBarIconBrightness: Brightness.light,
        systemNavigationBarColor: Color.fromARGB(255, 30, 30, 30),
        systemNavigationBarIconBrightness: Brightness.light,
      ),
      // 其他AppBar配置...
    ),
    // 其他主题配置...
  );
}

3. 确保主题全局生效

在MaterialApp中绑定深浅主题，并通过themeMode控制模式切换：

MaterialApp(
  theme: LightTheme.apptheme,
  darkTheme: DarkTheme.apptheme,
  themeMode: ThemeMode.system, // 跟随系统或手动切换
  home: HomePage(),
);

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