使用Riverpod调用watch监听Provider时Widget未按预期重建如何解决？

问题根因 #

你使用的是普通Provider定义状态，该类型Provider不会监听内部ChangeNotifier触发的notifyListeners通知，所以状态变更时无法主动通知关联Widget重建，只有重新进入页面重新读取Provider实例时才能拿到最新值。

修复步骤 #

1. 替换Provider类型为ChangeNotifierProvider，该类型会自动监听ChangeNotifier的通知事件：

// 修改前
// final randomize = Provider((_) => RandomizeChangeNotifier());
// 修改后
final randomize = ChangeNotifierProvider<RandomizeChangeNotifier>((ref) => RandomizeChangeNotifier());

2. 原有ref.watch(randomize).randomNumber的监听写法无需调整，修改后触发generateRandomNumber方法时，对应的Text组件会自动重建刷新。

可选优化 #

如果要减少不必要的重建，你可以只监听randomNumber属性而非整个Notifier实例：

Text(
  ref.watch(randomize.select((value) => value.randomNumber))?.toString() ??
      'Generate A Random Number',
  style: TextStyle(fontSize: 16),
)

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