Image.networkloadingBuilder的加载进度事件为null

Question

我正在尝试使用Image.network构造函数的loadingBuilder参数。

加载图像时，我想显示 a CircularProgressIndicator，其值设置为下载量除以预期文件大小的比率。我希望我可以使用ImageChunkEvent参数的cumulativeBytesLoaded,来做到这一点expectedTotalBytes。

我在文档中找到了一个示例：

以下示例用于loadingBuilder显示CircularProgressIndicator图像通过网络加载的时间。

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null)
      return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
            : null,
      ),
    );
  },
),

但问题是，它loadingProgress总是如此null，所以我所做的整个loadingBuilder谜题都是徒劳的。

为什么不将实际值ImageChunkEvent loadingProgress传递给函数？loadingBuilder

Answer 1

记得将 或 gif 放入assets文件夹并在其中引用pubspec.yaml

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://backend.example.com/image.png',
);

欲了解更多信息： https://api.flutter.dev/flutter/widgets/FadeInImage-class.html