Flutter中系统深色模式切换时颜色不更新的问题求助

1. 核心问题分析 #

当前代码未监听系统亮度变化事件，且仅依赖本地存储的开关状态控制主题，导致系统切换深色/浅色模式时页面无法同步更新。需要添加系统亮度监听，并调整主题状态的优先级逻辑。

2. 关键修改方案 #

• 继承WidgetsBindingObserver监听系统亮度变化
• 区分手动设置和跟随系统两种状态，手动设置优先级高于系统
• 系统亮度变化时，仅在用户未手动设置的情况下同步更新页面

修改后的完整代码 #

import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MainApp());
}

class MainApp extends StatefulWidget {
  MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> with WidgetsBindingObserver {
  bool? _manualDarkMode; // null表示跟随系统，true/false表示手动设置深色/浅色

  Future<void> saveManualDarkMode(bool? value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    if (value == null) {
      await prefs.remove("manualDarkMode");
    } else {
      await prefs.setBool("manualDarkMode", value);
    }
  }

  Future<bool?> getManualDarkMode() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getBool("manualDarkMode");
  }

  // 获取当前生效的深色模式状态
  bool _getCurrentDarkMode() {
    if (_manualDarkMode != null) {
      return _manualDarkMode!;
    }
    // 未手动设置时跟随系统亮度
    return MediaQuery.of(context).platformBrightness == Brightness.dark;
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _loadManualSetting();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  // 加载本地存储的手动设置
  Future<void> _loadManualSetting() async {
    _manualDarkMode = await getManualDarkMode();
    setState(() {});
  }

  // 系统亮度变化时触发的回调
  @override
  void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    // 仅在未手动设置时更新状态
    if (_manualDarkMode == null) {
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    final isDarkMode = _getCurrentDarkMode();
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            children: [
              Switch(
                value: isDarkMode,
                onChanged: (bool value) {
                  setState(() {
                    _manualDarkMode = value;
                    saveManualDarkMode(value);
                  });
                },
              ),
              Expanded(
                child: Container(
                  color: isDarkMode ? Colors.black : Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

功能说明 #

• 手动切换开关时，会保存当前设置为手动模式，后续系统变化不会覆盖该设置
• 未手动设置时，页面会跟随系统深色/浅色模式自动切换
• 手动设置后，若想恢复跟随系统，可通过开关切换回与当前系统一致的状态（此时会清除手动设置标记）

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