Image.network loadingBuilder的加载进度事件为null答案

【问题标题】：Image.network loadingBuilder's loading progress event is nullImage.network loadingBuilder的加载进度事件为null
【发布时间】：2020-01-29 17:46:19
【问题描述】：

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

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

我在文档中找到了sample：

以下示例使用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 函数？

【问题讨论】：

我只是在尝试同样的事情（也通过网络加载图像），我的代码看起来和你的一模一样。我只是注意到，如果需要一段时间（比如接近 1 秒），它不会显示加载指示器，猜测图像进入之前的时间太短了。

标签： image flutter loading user-experience

【解决方案1】：

也许图像尺寸较小，因此会立即加载，请尝试使用不同的较大网络图像进行测试。

【讨论】：

【解决方案2】：

记得把 gif 放到assets 文件夹中，并在pubspec.yaml 中引用

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

【讨论】：

我不是在询问 FadeInImage。我不想显示资产，我想在图像加载时渲染一个小部件。