Flutter FutureProvider修改模型后watch监听未触发页面重建问题

问题原因&修复方案 #

你遇到的问题核心是2个常见的FutureProvider使用误区，按优先级修复即可：

1. FutureProvider构造方式错误

你已经在initState中提前初始化了_teamsFuture，这种情况下不能用默认的FutureProvider构造函数，必须用.value构造传入已创建的Future，否则会出现状态通知不触发的问题：

// 改前
FutureProvider<List<Team>>(
  initialData: const [],
  create: (context) => _teamsFuture,
  child: MatchForm(),
)
// 改后
FutureProvider<List<Team>>.value(
  value: _teamsFuture,
  initialData: const [],
  child: MatchForm(),
)

2. 初始状态和空列表状态冲突

你用空数组[]作为初始加载状态，和接口返回真实空列表的状态完全无法区分，很容易出现逻辑误判，建议改为可空类型区分加载状态：
首先修改AddMatchScreen中的Provider定义：

// 把类型改为可空，初始值设为null代表加载中
FutureProvider<List<Team>?>(
  initialData: null,
  create: (context) => Team.getAllTeams(),
  child: const MatchForm(),
)

然后修改MatchForm中的判断逻辑：

@override
Widget build(BuildContext context) {
  final teams = context.watch<List<Team>?>();
  // 加载中状态
  if (teams == null) {
    return const Loader();
  }
  // 加载完成但无数据
  if (teams.isEmpty) {
    return const Text('暂无可用队伍');
  }
  // 有数据展示内容
  return Container(
    // 你的业务代码
  );
}

额外排查步骤 #

如果修改后还是有问题，按以下步骤排查：

• 去掉MatchForm构造前的const修饰，避免常量Widget缓存导致的重建异常
• 在MatchForm的build逻辑中打印teams.length确认长度确实大于0，避免自定义集合类toString和isEmpty逻辑不一致的问题
• 给内容区域的Container加固定高度和背景色，确认不是内容布局大小为0导致的不可见，而非页面没有重建

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