如何使作为Provider的ChangeNotifier设计类支持Flutter热重载？

问题根源 #

你的代码中，Design类的_backgroundColor初始值在实例化时赋值，而ChangeNotifierProvider的create回调仅在App首次启动时执行一次。Hot Reload不会销毁已存在的Design实例并重新创建，因此修改初始值后，旧实例的变量不会自动更新，导致UI无变化。

解决方案 #

我们可以利用Flutter的Hot Reload钩子，在每次热重载后让已存在的Design实例同步新的默认值并触发UI更新，同时保留Provider+ChangeNotifier的架构。

修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:provider/provider.dart';

// 抽离默认颜色为顶层变量，Hot Reload时会重新加载最新值
final defaultBackgroundColor = Colors.cyan;

void main() async {
  // 注册Hot Reload回调（仅Debug模式生效）
  if (kDebugMode) {
    debugDidReceiveHotReload = () {
      // 获取已存在的Design实例
      final design = Provider.debugCheckInvalidValueType?.call<Design>();
      if (design != null) {
        design.resetToDefaults();
      }
    };
  }

  runApp(MaterialApp(
    home: MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Design()),
      ],
      builder: (context, child) => GestureDetector(
        onTap: () => context.read<Design>().backgroundColor = Colors.green,
        child: Container(
          color: context.select<Design, Color>((d) => d.backgroundColor),
        ),
      ),
    ),
  ));
}

class Design with ChangeNotifier {
  late Color _backgroundColor;

  Design() {
    // 初始化时读取默认值
    resetToDefaults();
  }

  // 重置为最新默认值并通知UI更新
  void resetToDefaults() {
    _backgroundColor = defaultBackgroundColor;
    notifyListeners();
  }

  Color get backgroundColor => _backgroundColor;
  set backgroundColor(Color color) {
    _backgroundColor = color;
    notifyListeners();
  }
}

方案说明 #

1. 抽离默认值：将初始颜色设为顶层变量，Hot Reload时会自动加载该变量的最新值；
2. Hot Reload回调：注册debugDidReceiveHotReload钩子，每次热重载后触发已存在的Design实例重置默认值；
3. 同步UI更新：resetToDefaults()方法更新变量后调用notifyListeners()，强制UI刷新；
4. 保留原有功能：既支持Hot Reload预览默认值变化，也保留了手动修改颜色（如点击容器切换为绿色）的交互逻辑。

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