Flutter中如何在NetworkImage加载时显示Asset图片及加载指示器？

你当前使用的DecorationImage本身没有内置加载状态监听逻辑，所以没法直接实现加载中显示圆形指示器、错误时显示本地Asset图的需求。下面给两种实用的解决方案：

方案1：原生实现（无需额外依赖） #

用Stack组件包裹，底层放置加载指示器或本地占位图，上层用Image.network并通过loadingBuilder和errorBuilder控制加载状态：

Stack(
  fit: StackFit.expand,
  children: [
    // 加载中显示圆形指示器，也可以替换成本地Asset图
    const Center(child: CircularProgressIndicator()),
    // 本地占位图示例：
    // Image.asset('assets/placeholder.png', fit: BoxFit.fill),

    Image.network(
      Juegos_de_siempre[index].url_foto,
      fit: BoxFit.fill,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        // 加载过程中隐藏图片，只显示底层的指示器/占位图
        return const SizedBox.shrink();
      },
      errorBuilder: (context, error, stackTrace) {
        // 加载失败时显示本地错误占位图
        return Image.asset('assets/error_placeholder.png', fit: BoxFit.fill);
      },
    ),
  ],
)

方案2：用第三方库简化逻辑 #

如果不想自己写状态判断，可以用cached_network_image包，它内置了加载、错误、占位的完整处理逻辑：

1. 先在pubspec.yaml添加依赖：

dependencies:
  cached_network_image: ^3.3.0

2. 替换原代码，直接实现需求：

CachedNetworkImage(
  imageUrl: Juegos_de_siempre[index].url_foto,
  fit: BoxFit.fill,
  placeholder: (context, url) => const CircularProgressIndicator(),
  errorWidget: (context, url, error) => Image.asset('assets/error.png'),
)

如果一定要用DecorationImage，也可以通过该库的CachedNetworkImageProvider实现：

DecorationImage(
  image: CachedNetworkImageProvider(Juegos_de_siempre[index].url_foto),
  fit: BoxFit.fill,
)

为什么原代码无法实现需求？ #

DecorationImage只是容器的装饰器，仅负责渲染已加载完成的图片，没有提供加载进度、错误状态的监听接口，因此无法在加载过程中切换显示内容。必须通过支持状态监听的Image组件或第三方库来实现这类需求。

内容的提问来源于stack exchange，提问作者Diego jiménez