ChangeNotifierProvider未更新主页面Consumer，主题切换失效

尝试根据登录接口返回的角色数据设置App主题，但主题未按预期更新，代码无报错，调试也未发现问题。相关代码如下：

主页面build方法代码 #

Widget build(BuildContext context) {
    return ChangeNotifierProvider<ThemeModel>(
        create: (_) => ThemeModel(),
        child: Consumer<ThemeModel>(
            builder: (context, ThemeModel themeNotifier, child) {
          return Sizer(builder: (context, orientation, deviceType) {
            return MaterialApp(
              theme: themeNotifier.theme == 'consultant'
                  ? counsultantApptheme()
                  : themeNotifier.theme == 'rmo'
                      ? rmoApptheme()
                      : counsultantApptheme(),
              navigatorKey: navigatorKey,
              debugShowCheckedModeBanner: false,
              initialRoute: startroute.toString(),
              routes: routes,
            );
          });
        }));

登录接口响应后更新主题的代码 #

if (snapshot.data!.data!.consultantYN == 'Y') {
    Provider.of<ThemeModel>(context, listen: false).theme = 'consultant';
} else {
    Provider.of<ThemeModel>(context, listen: false).theme = 'rmo';
}

ThemeModel类代码 #

//theme_model.dart
import 'package:flutter/material.dart';
import 'package:nmc/widgets/theme_config/theme_preference.dart';

class ThemeModel extends ChangeNotifier {
  late String _theme;
  late ThemePreferences _preferences;
  String get theme => _theme;

  ThemeModel() {
    _theme = 'default';
    _preferences = ThemePreferences();
    getPreferences();
  }
//Switching themes in the flutter apps - Flutterant
  set theme(String value) {
    _theme = value;
    _preferences.setTheme(value);
    notifyListeners();
  }

  getPreferences() async {
    _theme = await _preferences.getTheme();
    notifyListeners();
  }
}

问题排查与解决方案 #

1. Provider作用域错误 #

当前ChangeNotifierProvider是在主页面build方法内创建的，这会导致主页面每次重建时都生成新的ThemeModel实例。如果登录后跳转页面触发主页面重建，新实例会从ThemePreferences读取旧值，覆盖登录时设置的主题。

修复方式：将ChangeNotifierProvider提升到App根节点，比如main函数中：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(
    ChangeNotifierProvider<ThemeModel>(
      create: (_) => ThemeModel(),
      child: const MyApp(),
    ),
  );
}

主页面build方法中不再创建Provider，直接通过上下文获取已有实例。

2. 异步初始化覆盖主题 #

ThemeModel构造函数中调用的getPreferences()是异步方法，会在实例创建后覆盖初始的_theme值。如果登录设置主题的操作先于该异步方法完成，偏好值会覆盖你设置的主题。

修复方式：调整初始化逻辑，确保登录设置主题的操作在异步读取完成后执行，或者在初始化时判断已有角色信息：

ThemeModel() {
  _preferences = ThemePreferences();
  _initTheme();
}

Future<void> _initTheme() async {
  _theme = await _preferences.getTheme();
  // 若本地已保存角色信息，可在此直接设置对应主题
  notifyListeners();
}

3. 主题判断逻辑冗余 #

当前默认分支返回counsultantApptheme()，如果_theme为初始值default，会默认使用顾问主题，逻辑易混淆。建议明确默认主题：

theme: themeNotifier.theme == 'consultant'
    ? counsultantApptheme()
    : themeNotifier.theme == 'rmo'
        ? rmoApptheme()
        : defaultApptheme(), // 替换为你定义的默认主题

4. 确保上下文能获取正确的Provider实例 #

登录页面中使用Provider.of时，要确保当前上下文能访问到根节点的ThemeModel实例（已提升Provider到根节点即可满足），避免因上下文嵌套问题获取到错误的实例。

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