Flutter中通过CachedNetworkImage加载时BlurHash闪烁如何解决？

• 核心触发点是异步数据的时序差：从Firestore请求数据时，首次构建CachedNetworkImage的阶段blurHash还未完成赋值，hasBlurhHash为false，占位组件先渲染加载动画；等Firestore数据返回触发状态更新后，hasBlurhHash变为true，占位组件切换为BlurHash。如果此时图片刚好完成加载，就会出现加载动画→BlurHash→原图的三次快速切换，视觉上表现为闪烁。
• 硬编码BlurHash时首次构建就可以拿到正确的占位组件，只有BlurHash到原图的单次过渡，因此不会触发闪烁。

1. 优先保证组件首次构建时已拿到完整的图片相关数据
   在Firestore数据未完全返回前，不要渲染CachedNetworkImage，可以先用统一的页面骨架屏占位，等imageUrl和blurHash都获取完成后再构建图片组件，从根源避免占位组件中途切换。

2. 调整CachedNetworkImage的过渡参数
   禁用占位组件的淡出动画，避免占位淡出和原图淡入的效果叠加产生闪烁：

Widget get _networkImage {
    final Duration fadeDuration = Duration(milliseconds: hasBlurhHash ? 500 : 0);
    return CachedNetworkImage(
      imageUrl: imageURL!,
      fit: fit,
      width: width,
      height: height,
      fadeInDuration: fadeDuration,
      // 把fadeOutDuration改为0
      fadeOutDuration: Duration.zero,
      placeholder: (context, __) => hasBlurhHash ? _blurHash : _loader(context),
      errorWidget: (context, url, error) => Image(image: AssetImage("assets/img/aboutus.png")),
    );
  }

3. 优化BlurHash实例的创建逻辑
   你当前用getter返回_blurHash，每次调用都会生成新的BlurHash实例，容易触发不必要的组件重建，改成提前初始化实例即可：

// 替换原来的_blurHash getter
late final Widget _blurHash = BlurHash(hash: blurHash!, color: Colors.white);

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