加载图像时缓存的网络图像不显示进度指示器

Question

我正在使用缓存的网络图像显示图像，当我单击查看图像时，它首先显示占位符图像，然后加载图像。我不明白为什么图像加载时不显示进度指示器。我想在图像加载时显示进度指示器。如果图像不可用，则应显示占位符图像。我在这里做错了什么？

Container(
              height: size.height * 0.35,
              width: double.infinity,
              child:_imageUrl != null
            ? CachedNetworkImage(
                imageUrl: _imageUrl,
                progressIndicatorBuilder: (context, url, downloadProgress) => 
                Center(child:Loading()),
                errorWidget: (context, url, error) => Icon(Icons.error),
              )
            :Image.asset('assets/images/placeholder.png'),
      ),

Answer 1

在缓存网络图片的progressIndicatorBuilder中，有一个名为downloadProgress的参数，将该值传递给CircularProgressIndicator以显示加载。

注意：将 NetowrkUrl 替换为实际 url

CachedNetworkImage(
  height: 400.h,
  imageUrl: "NetworkUrl",
  progressIndicatorBuilder: (context, url, downloadProgress) => 
    Container(
      margin: EdgeInsets.only(
        top: 100.h,
        bottom: 100.h
      ),
      child: CircularProgressIndicator(
        value: downloadProgress.progress,
        color: AppColors.lightBlack
      ),
    ),
  errorWidget: (context, url, error) => Icon(Icons.error), // replace with your own error widget
);