Flutter中Provider实现主题色随系统主题动态切换失效问题求助

我来帮你排查并解决这个问题，看了你的代码后，发现几个关键的问题点，我们一步步修复：

1. 修复AppTheme类的静态变量问题 #

你的AppTheme类里把_isDarkMode和_theme定义成了静态变量，这是核心错误！因为ChangeNotifier实例是由Provider管理的，静态变量会在所有实例间共享，导致状态无法正确更新。我们需要把它们改成实例变量：

class AppTheme with ChangeNotifier {
  bool _isDarkMode;
  AppThemeData _theme;

  AppTheme() {
    // 初始化时获取系统当前亮度
    final brightness = SchedulerBinding.instance.window.platformBrightness;
    _isDarkMode = brightness == Brightness.dark;
    _theme = _isDarkMode ? darkModeTheme : lightModeTheme;
  }

  bool get isDarkMode => _isDarkMode;
  AppThemeData get theme => _theme;

  void changeAppThemeMode(bool appIsDarkMode) {
    _isDarkMode = appIsDarkMode;
    _theme = _isDarkMode ? darkModeTheme : lightModeTheme;
    notifyListeners(); // 通知所有监听者状态变化
  }
}

2. 正确注册系统亮度变化监听 #

之前的didChangePlatformBrightness没有通过WidgetsBindingObserver注册，导致无法收到系统主题切换的回调。我们需要让你的App的State类继承WidgetsBindingObserver，并注册监听：

class MyAppState extends State<MyApp> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    // 注册系统亮度变化监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 页面销毁时取消监听，避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    // 获取最新的系统亮度
    final brightness = WidgetsBinding.instance.window.platformBrightness;
    final isDarkMode = brightness == Brightness.dark;
    // 通知AppTheme更新主题
    Provider.of<AppTheme>(context, listen: false).changeAppThemeMode(isDarkMode);
    
    widget.onBrightnessChanged?.call();
  }

  @override
  Widget build(BuildContext context) {
    // 用Consumer包裹MaterialApp，确保主题变化时MaterialApp会重建
    return Consumer<AppTheme>(
      builder: (context, appTheme, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Find Pic',
          theme: ThemeData(
            brightness: Brightness.light,
            primarySwatch: buildMaterialColor(appTheme.theme.primaryColor),
          ),
          darkTheme: ThemeData(
            brightness: Brightness.dark,
            primarySwatch: buildMaterialColor(appTheme.theme.primaryColor),
          ),
          themeMode: ThemeMode.system, // 跟随系统主题模式
          home: const MyHomePage(),
        );
      },
    );
  }
}

3. 确保Widget正确监听主题变化 #

你的Container组件设置了listen: false，这会导致它不会监听AppTheme的状态变化，所以主题切换时颜色不会更新。改成默认的listen: true，或者用更高效的Consumer：

方式一：使用Provider.of（默认listen: true） #

Container(
  height: 100,
  width: 100,
  color: Provider.of<AppTheme>(context).theme.primaryColor,
)

方式二：使用Consumer（推荐，减少不必要的重建） #

Consumer<AppTheme>(
  builder: (context, appTheme, child) {
    return Container(
      height: 100,
      width: 100,
      color: appTheme.theme.primaryColor,
    );
  },
)

4. 验证配置 #

确保你的MaterialApp的themeMode设置为ThemeMode.system，这样系统会自动根据系统主题切换亮色/暗色模式，同时我们的自定义主题色也会同步更新。

为什么之前的代码不生效？ #

• 静态变量导致AppTheme的状态无法正确实例化，每次主题切换时状态没有真正更新；
• 未注册WidgetsBindingObserver，无法捕获系统亮度变化的事件；
• MaterialApp没有监听AppTheme的状态变化，导致主题色参数不会更新；
• Container组件没有监听主题变化，所以颜色不会跟着变。

现在按照上面的修改，你应该就能实现系统主题切换时，主色调自动在亮绿色（深色主题）和深蓝色（浅色主题）之间切换了。

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