Flutter：如何根据当前主题（深色/浅色）更改状态栏和导航栏颜色

核心思路 #

利用Flutter内置的ThemeData配置浅色/深色主题对应的系统栏样式，让主题切换时自动同步状态栏和导航栏的颜色，无需额外监听主题变化。

步骤1：定义带系统栏样式的主题 #

在ThemeData的appBarTheme中配置systemOverlayStyle，分别设置浅色和深色主题下的状态栏、导航栏颜色及图标亮度：

// 浅色主题
final lightTheme = ThemeData(
  brightness: Brightness.light,
  appBarTheme: const AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle(
      // 浅色主题下状态栏文字/图标为深色
      statusBarIconBrightness: Brightness.dark,
      // 状态栏背景色（可选，默认继承AppBar颜色）
      statusBarColor: Colors.white,
      // Android导航栏背景色
      systemNavigationBarColor: Colors.white,
      // Android导航栏图标颜色
      systemNavigationBarIconBrightness: Brightness.dark,
    ),
  ),
  // 其他浅色主题配置（如颜色Scheme、文本样式等）
);

// 深色主题
final darkTheme = ThemeData(
  brightness: Brightness.dark,
  appBarTheme: const AppBarTheme(
    systemOverlayStyle: SystemUiOverlayStyle(
      // 深色主题下状态栏文字/图标为浅色
      statusBarIconBrightness: Brightness.light,
      statusBarColor: Colors.black,
      systemNavigationBarColor: Colors.black,
      systemNavigationBarIconBrightness: Brightness.light,
    ),
  ),
  // 其他深色主题配置
);

步骤2：在MaterialApp中应用主题 #

将定义好的主题传入MaterialApp，并设置themeMode控制主题切换逻辑（跟随系统/固定浅色/固定深色）：

MaterialApp(
  title: 'Theme Switch Demo',
  theme: lightTheme,
  darkTheme: darkTheme,
  // 跟随系统主题切换，可改为ThemeMode.light或ThemeMode.dark固定主题
  themeMode: ThemeMode.system,
  home: const HomePage(),
);

无AppBar页面的处理 #

如果页面没有使用AppBar，可以在页面的build方法中根据当前主题亮度动态设置系统栏样式：

@override
Widget build(BuildContext context) {
  final isDarkMode = Theme.of(context).brightness == Brightness.dark;
  
  // 动态设置系统栏样式
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarIconBrightness: isDarkMode ? Brightness.light : Brightness.dark,
      statusBarColor: isDarkMode ? Colors.black : Colors.white,
      systemNavigationBarColor: isDarkMode ? Colors.black : Colors.white,
      systemNavigationBarIconBrightness: isDarkMode ? Brightness.light : Brightness.dark,
    ),
  );

  return Scaffold(
    body: Center(
      child: // 页面内容
    ),
  );
}

说明 #

• 这种方法完全依赖Flutter的主题系统，无需额外添加第三方包，是最简洁的实现方式。
• systemOverlayStyle中的属性可根据需求调整，比如不需要自定义状态栏背景色时，可省略statusBarColor，让其继承页面背景或AppBar颜色。

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