Flutter主题切换时systemNavigationBarColor与statusBarColor延迟问题

你的问题出在setState和SystemUI样式设置的执行顺序以及手动硬编码颜色导致的不同步上。下面给你两种可行的解决方案：

方案一：调整执行顺序，先改系统栏样式再更新状态 #

原来的代码先调用setState触发UI重建（异步过程），再设置系统栏样式，这就导致系统栏的变化滞后于主题切换。把顺序反过来，先设置SystemUI样式，再调用setState，就能让两者的视觉变化更同步：

void changeTheme(ThemeMode themeMode) {
  bool isDark = themeMode == ThemeMode.dark; // 直接判断枚举，比取name更可靠

  // 先设置系统UI样式
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
    statusBarColor: isDark ? Color(0xff1a1a1a) : Colors.white,
    systemNavigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
    systemNavigationBarColor: isDark ? Color(0xff1a1a1a) : Colors.white,
    systemNavigationBarDividerColor: isDark ? Color(0xff1a1a1a) : Colors.white,
  ));

  // 再更新主题状态
  setState(() {
    _themeMode = themeMode;
  });
}

方案二：关联ThemeData自动同步系统栏样式（更优雅） #

手动设置SystemUI样式容易和ThemeData脱节，更好的方式是在MaterialApp的主题配置里直接绑定系统栏样式，这样切换主题时系统栏会自动跟着主题变化，不需要单独调用SystemChrome：

1. 配置MaterialApp的主题 #

class MyApp extends StatefulWidget {
  static MyAppState of(BuildContext context) => context.findAncestorStateOfType<MyAppState>()!;

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  ThemeMode _themeMode = ThemeMode.light;

  void changeTheme(ThemeMode themeMode) {
    setState(() {
      _themeMode = themeMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
        // 配置浅色主题下的系统栏样式
        appBarTheme: AppBarTheme(
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarIconBrightness: Brightness.dark,
            statusBarColor: Colors.white,
            systemNavigationBarIconBrightness: Brightness.dark,
            systemNavigationBarColor: Colors.white,
            systemNavigationBarDividerColor: Colors.white,
          ),
        ),
        // 其他浅色主题配置...
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        // 配置深色主题下的系统栏样式
        appBarTheme: AppBarTheme(
          systemOverlayStyle: SystemUiOverlayStyle(
            statusBarIconBrightness: Brightness.light,
            statusBarColor: Color(0xff1a1a1a),
            systemNavigationBarIconBrightness: Brightness.light,
            systemNavigationBarColor: Color(0xff1a1a1a),
            systemNavigationBarDividerColor: Color(0xff1a1a1a),
          ),
        ),
        // 其他深色主题配置...
      ),
      themeMode: _themeMode,
      home: YourHomePage(), // 替换为你的首页组件
    );
  }
}

2. 简化主题切换方法 #

这时你的changeTheme方法只需要更新_themeMode即可，不需要再手动处理SystemUI：

void changeTheme(ThemeMode themeMode) {
  setState(() {
    _themeMode = themeMode;
  });
}

这种方式能保证主题和系统栏样式完全同步，不会出现延迟，而且代码更简洁易维护。

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