Flutter如何在切换深色模式时修改系统导航栏与状态栏颜色

你当前的实现是在main函数中一次性固定设置了SystemUiOverlayStyle，没有和应用的明暗模式做绑定，所以无法跟随系统变化自动切换。

推荐实现方式：通过Theme配置自动适配 #

直接在MaterialApp的theme和darkTheme属性中分别配置对应模式的systemOverlayStyle，配合themeMode参数即可实现自动切换：

void main() async {
  // 初始化Flutter绑定，必须加，否则无法获取系统亮度
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '模式适配Demo',
      // 浅色模式主题配置
      theme: ThemeData(
        brightness: Brightness.light,
        // 浅色模式对应的系统UI样式
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarBrightness: Brightness.dark,
          statusBarColor: Colors.white,
          statusBarIconBrightness: Brightness.dark,
          systemNavigationBarColor: Colors.white,
          systemNavigationBarDividerColor: Colors.white,
          systemNavigationBarIconBrightness: Brightness.dark,
        ),
      ),
      // 深色模式主题配置
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        // 深色模式对应的系统UI样式
        systemOverlayStyle: const SystemUiOverlayStyle(
          statusBarBrightness: Brightness.light,
          statusBarColor: Colors.black,
          statusBarIconBrightness: Brightness.light,
          systemNavigationBarColor: Colors.black,
          systemNavigationBarDividerColor: Colors.black,
          systemNavigationBarIconBrightness: Brightness.light,
        ),
      ),
      // 设置为跟随系统模式切换，也可手动指定为ThemeMode.light/ThemeMode.dark
      themeMode: ThemeMode.system,
      home: const HomePage(),
    );
  }
}

单页面自定义样式的适配方案 #

如果单个页面需要和全局样式不同，可使用AnnotatedRegion组件动态适配当前模式：

class CustomPage extends StatelessWidget {
  const CustomPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取当前系统的明暗模式
    final isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;
    return AnnotatedRegion<SystemUiOverlayStyle>(
      // 动态赋值对应模式的样式
      value: isDarkMode
          ? const SystemUiOverlayStyle(
              // 自定义深色模式下的系统UI参数
              statusBarColor: Colors.transparent,
              systemNavigationBarColor: Color(0xFF121212),
              systemNavigationBarIconBrightness: Brightness.light,
            )
          : const SystemUiOverlayStyle(
              // 自定义浅色模式下的系统UI参数
              statusBarColor: Colors.transparent,
              systemNavigationBarColor: Colors.white,
              systemNavigationBarIconBrightness: Brightness.dark,
            ),
      child: Scaffold(
        // 页面内容
        appBar: AppBar(title: const Text("自定义样式页面")),
      ),
    );
  }
}

注意事项 #

• 不要在main函数中写死固定的SystemUiOverlayStyle，否则会覆盖Theme的动态配置
• Android 8.0以下版本不支持修改导航栏图标亮度，建议做版本兼容判断
• 如果你实现了应用内手动切换明暗模式的功能，仅需修改themeMode参数的值，系统UI样式会自动同步更新

内容的提问来源于stack exchange，提问作者Вадим