Flutter使用firebase_image加载图片时显示CircularProgressIndicator方法

问题背景 #

• 开发场景：Flutter项目中使用firebase_image包加载Firebase Storage存储的图片
• 实现目标：图片加载过程中展示CircularProgressIndicator()作为加载提示
• 已尝试方案：搭配transparent_image包使用FadeInImage实现效果，但因传入的是gs://协议的存储路径而非公网HTTP链接，方案未生效
• 当前临时方案：通过Stack将CircularProgressIndicator堆叠在FirebaseImage组件下方，认为该实现不够优雅
• 核心疑问：是否存在更合理的实现方式？是否必须更换其他依赖包下载Firebase存储图片？

当前使用的图片加载代码如下：

Image(
  image: FirebaseImage('gs://chichichi.appspot.com/someimage.jpg'),
  fit: BoxFit.fitWidth,
  width: Get.width,
)

最优实现方案 #

不需要更换依赖包，也不需要手动用Stack堆叠组件。FirebaseImage本身是完全符合Flutter规范的ImageProvider实现，和框架自带的NetworkImage、AssetImage用法完全一致，可以直接配合Image组件原生提供的loadingBuilder参数实现加载状态提示，框架会自动根据图片加载状态切换组件，不需要手动维护显隐状态。

实现代码 #

Image(
  image: FirebaseImage('gs://chichichi.appspot.com/someimage.jpg'),
  fit: BoxFit.fitWidth,
  width: Get.width,
  loadingBuilder: (context, child, loadingProgress) {
    // 加载完成判断：loadingProgress为null时代表图片已加载完成，直接返回图片组件
    if (loadingProgress == null) return child;
    // 加载中状态返回居中的进度指示器
    return Center(
      child: CircularProgressIndicator(
        // 可选：根据已加载字节/总字节展示精确加载进度，不需要可省略该参数
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
)

补充说明 #

• 之前FadeInImage方案失效，是因为大概率使用了FadeInImage.network()命名构造函数，该构造函数仅支持传入HTTP/HTTPS格式的网络链接。如果需要淡入效果配合加载提示，直接使用FadeInImage默认构造函数，将FirebaseImage实例传入image参数即可，不需要依赖公网链接。
• 手动用Stack堆叠的方案不存在功能问题，但需要额外监听图片加载状态手动控制指示器显隐，代码冗余且容易出现状态同步问题，优先使用框架原生提供的loadingBuilder能力即可。
• 不需要更换其他Firebase存储图片加载包，firebase_image提供的图片提供者已经完全适配Flutter原生图片加载体系，所有支持传入ImageProvider的组件都可以直接使用。

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