如何监听CachedNetworkImage网络图片的成功渲染状态？

你当前通过下载进度判断图片加载完成的方式存在偏差——下载完成仅代表图片数据已获取，后续还有解码、绘制到屏幕的过程，此时标记isLoaded为true会导致加载状态提前消失，而图片实际还未显示。

正确的做法是利用CachedNetworkImage的imageBuilder回调，它会在图片成功加载并完成解码、准备渲染时触发，这是判断图片即将显示的准确时机。同时配合错误回调和进度回调维护加载状态：

return CachedNetworkImage(
  fit: BoxFit.fill,
  imageUrl: url,
  imageBuilder: (context, imageProvider) {
    // 图片已准备好渲染，标记加载完成
    if (!isLoaded) {
      setState(() {
        isLoaded = true;
      });
    }
    return Image(
      image: imageProvider,
      fit: BoxFit.fill,
    );
  },
  errorWidget: (a, b, c) {
    // 加载失败，重置加载状态
    setState(() {
      isLoaded = false;
    });
    return const Center(child: Icon(Icons.error_outline));
  },
  progressIndicatorBuilder: (context, _, DownloadProgress progress) {
    // 下载过程中保持加载状态（若之前已标记完成则重置）
    if (isLoaded) {
      setState(() {
        isLoaded = false;
      });
    }
    return Shimmer(color: Colors.grey, child: const SizedBox.expand());
  },
);

关键说明： #

• imageBuilder：是图片真正准备好渲染的信号，此时设置isLoaded为true，能确保加载状态直到图片显示前都保持。
• 原有的getProgressStatus方法可以直接删除，所有状态逻辑已整合到各个回调中。
• 错误回调中重置isLoaded，避免加载失败后状态异常。

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