Flutter中使用Switch切换主题时状态异常问题排查

核心问题：Switch状态与主题切换逻辑完全反向 #

你的Switch的value是判断「当前是否为深色主题」，但在onChanged回调里，你把Switch的状态参数反过来映射到了主题模式：当开关打开（参数为true）时，你设置的是ThemeMode.light，这会导致主题切换后，Theme.of(context).brightness变回Brightness.light，Switch的value随之变为false，直接触发复位。

同时还有两个同步问题：

• 存储的主题字符串与实际设置的主题模式不匹配，会导致下次启动时主题状态错乱
• 状态栏图标亮度的逻辑也与主题需求反向

修正后的代码 #

Switch(
  value: Theme.of(context).brightness == Brightness.dark,
  onChanged: (isDarkModeEnabled) async {
    print(isDarkModeEnabled);
    // 存储与开关状态一致的主题
    await MySecureStorage().writeData('theme', isDarkModeEnabled ? 'dark' : 'light');
    // 开关开启则设置深色主题，关闭则设置浅色主题
    Provider.of<MainProvider>(context, listen: false).changeThemeMode(
      isDarkModeEnabled ? ThemeMode.dark : ThemeMode.light,
    );
    // 深色主题下状态栏图标用浅色，确保可见性
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: isDarkModeEnabled
            ? Brightness.light
            : Brightness.dark,
      ),
    );
  },
)

关键调整点 #

1. 主题模式映射逻辑与Switch的value判断保持一致：开关开启（isDarkModeEnabled=true）时设置ThemeMode.dark，关闭时设置ThemeMode.light
2. 状态栏图标亮度适配主题：深色主题下用浅色图标，浅色主题下用深色图标
3. 存储的主题字符串与实际主题同步，避免启动状态不一致

内容的提问来源于stack exchange，提问作者Karol Wiśniewski