Flutter项目使用setState和FutureBuilder后Firebase更新页面无变化问题

• 异步逻辑写法错误：setState接收的是同步无返回值的回调函数，你在回调中声明async并执行异步更新操作时，setState不会等待Firebase更新完成就会触发页面刷新，此时更新操作还未完成，页面渲染的仍然是旧数据。
• FutureBuilder特性限制：FutureBuilder仅会在组件初始化、绑定的Future实例发生变更时执行一次异步请求。你仅更新了Firebase远端数据，没有重新拉取最新的Firestore数据集替换本地旧快照，也没有更新FutureBuilder绑定的Future实例，所以UI不会自动同步变更。热重启会触发组件重新初始化、重新拉取全量数据，因此可以看到更新后的内容。

方案1：继续使用FutureBuilder（临时可用，实时性较差） #

调整异步执行顺序，Firebase更新完成后重新拉取数据、更新Future实例再触发刷新：

// 首先在组件内定义Future变量，绑定给FutureBuilder
Future getWatchListFuture = watchLaterRef.get();

// 按钮逻辑调整为
Center(
  child: IconButton(
    onPressed: () async {
      // 先执行远端更新操作
      await watchLaterRef.doc(documentId).update({
        'isWatched': !snapshot.data.docs[i].data()['isWatched']
      });
      // 更新完成后重新拉取数据，触发FutureBuilder刷新
      setState(() {
        getWatchListFuture = watchLaterRef.get();
      });
    },
    icon: Icon(
      Icons.check_box,
      size: 50,
      color: snapshot.data.docs[i].data()['isWatched'] ? Colors.green : Colors.yellow,
    ),
  )
)

方案2：改用StreamBuilder监听实时变更（推荐） #

Firebase Firestore原生支持实时数据流监听，远端数据变更后会自动推送到本地，无需手动触发刷新：

// 把原来的FutureBuilder替换为StreamBuilder
StreamBuilder(
  stream: watchLaterRef.snapshots(),
  builder: (context, snapshot) {
    // 原有列表渲染逻辑保持不变
    if (!snapshot.hasData) return const CircularProgressIndicator();
    return Center(
      child: IconButton(
        onPressed: () async {
          await watchLaterRef.doc(documentId).update({
            'isWatched': !snapshot.data.docs[i].data()['isWatched']
          });
          // 无需手动调用setState，Stream监听到变更后会自动刷新UI
        },
        icon: Icon(
          Icons.check_box,
          size: 50,
          color: snapshot.data.docs[i].data()['isWatched'] ? Colors.green : Colors.yellow,
        ),
      )
    );
  }
)

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