Flutter中调用setState触发FutureBuilder反复闪烁问题如何解决？

核心诱因 #

你遇到的闪烁完全是代码中滥用UniqueKey导致的，和setState、AnimatedContainer本身没有关系：

• 图片区域的FutureBuilder绑定了key: UniqueKey()，每次调用setState触发组件重建时，都会生成全新的Key值，Flutter检测到Key变化会直接销毁旧的图片FutureBuilder节点，重新走一遍初始化→加载→渲染的完整流程，就会出现加载进度条和图片反复切换的闪烁效果。
• 你在_buildPictures方法中给图片容器、Image.memory组件也都绑定了UniqueKey()，同样会导致每次build时图片组件被强制重建，加剧闪烁问题。

修复步骤 #

1. 删除图片FutureBuilder上的key: UniqueKey()属性：

// 修改前
FutureBuilder(
  key: UniqueKey(),
  future: picturesFuture,
  ...
)
// 修改后
FutureBuilder(
  future: picturesFuture,
  ...
)

2. 删除_buildPictures方法中所有UniqueKey()的绑定：

// 修改前
Container(
  key: UniqueKey(),
  ...
  child: Image.memory(
    pic,
    key: UniqueKey(),
    ...
  ),
)
// 修改后
Container(
  ...
  child: Image.memory(
    pic,
    ...
  ),
)

3. 补充异步赋值的状态通知：你在initState的journalFuture.then回调中给picturesFuture赋值时，需要套一层setState，否则UI可能无法感知到picturesFuture已更新，出现加载完成后不显示图片的问题：

journalFuture.then((entries) {
  // 原有排序逻辑不变
  ...
  setState(() {
    picturesFuture = StorageService(AuthService().getUser()!.uid)
        .getPictures(entries[0].date);
  });
});

4. （可选优化）删除build方法中对entries的重复排序逻辑，initState中已经完成排序，重复执行无意义还会浪费性能。

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