Flutter中通过文件路径加载Image时如何显示加载指示器

要实现文件图片加载过程中展示加载状态，我们可以直接使用Image.file组件的原生参数实现，不需要引入第三方库。

核心实现逻辑 #

• 利用组件内置的loadingBuilder参数监听加载状态，加载未完成时返回加载指示器，加载完成后返回渲染好的图片
• loadingBuilder是Flutter 2.0之后新增的原生参数，无额外依赖
• 可选搭配errorBuilder参数处理图片加载失败的场景

完整示例代码 #

Image.file(
  File(selectedImagePath),
  width: double.infinity,
  height: double.infinity,
  // 加载状态构建逻辑
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
    // loadingProgress为空代表图片加载完成，直接返回图片组件
    if (loadingProgress == null) return child;
    // 加载过程中返回自定义的加载指示器，可按需替换为骨架屏、占位图等组件
    return Center(
      child: CircularProgressIndicator(
        // 可选配置：展示精确加载进度
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
  // 可选配置：加载失败时的占位组件
  errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
    return const Center(
      child: Icon(Icons.broken_image, size: 48, color: Colors.grey),
    );
  },
)

适配低版本Flutter的方案 #

如果你使用的Flutter版本低于2.0，没有loadingBuilder参数，可以使用frameBuilder实现同等效果：

Image.file(
  File(selectedImagePath),
  width: double.infinity,
  height: double.infinity,
  frameBuilder: (BuildContext context, Widget child, int? frame, bool wasSynchronouslyLoaded) {
    if (wasSynchronouslyLoaded) return child;
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 200),
      child: frame != null ? child : const Center(child: CircularProgressIndicator()),
    );
  },
)

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