如何使用cached_network_image预加载图片？

Question

我刚刚实现了Flutter的cached_network_image包，我想知道如何预加载图片，以便稍后能够立即使用它们。我从我们的服务器检索稍后将要使用的所有图像URL。

我定义了自己的自定义缓存管理器获取器：

class LocalCacheManager {
  static const key = 'customCacheKey';
  static CacheManager instance = CacheManager(
    Config(
      key,
      stalePeriod: const Duration(days: 14),
      maxNrOfCacheObjects: 200,
      repo: JsonCacheInfoRepository(databaseName: key),
      fileSystem: LocalCacheFileSystem(key),
      fileService: HttpFileService(),
    ),
  );
}

以下是我目前尝试预加载图像的方法：

LocalCacheManager.instance.downloadFile(MY_IMAGE_URL)),

以下是我创建小部件的方法：

child: CachedNetworkImage(imageUrl: MY_IMAGE_URL, cacheManager: LocalCacheManager.instance),

但我清楚地看到，只要我创建了CachedNetworkImage，文件就会立即被重新缓存。

- Ruben Aster

---

我必须承认我的解决方案有效...我使用另一个包来显示带有淡入动画的图像，这就是为什么我没有看到太大的区别。所以如果有人想知道如何预加载缓存的网络图像，这就是方法。 - Ruben Aster

Answer 1

你可以像这样使用 Flutter Cache Manager
。

DefaultCacheManager().downloadFile(MY_IMAGE_URL).then((_) {});

稍后，只需像这样使用您的缓存图像

child: CachedNetworkImage(imageUrl: MY_IMAGE_URL,),

- dm_tr

Answer 2

最简单可行的方法是使用precacheImage（Flutter内置函数），并搭配CachedNetworkImageProvider：

Image image = Image(
        image: CachedNetworkImageProvider(/* url */),
        fit: BoxFit.cover,
      );

      precacheImage(image.image, context);

      return Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8.0),
                child: image,
              ),
            );

- Jim

Answer 3

用这个兄弟：

它是在Flutter中内置的https://api.flutter.dev/flutter/widgets/precacheImage.html，不需要安装更多的库。

- TSR

Answer 4

 cached_network_image: ^2.0.0 
            CachedNetworkImage(
                      imageUrl: yoururl,
                      errorWidget: (context, url, error) => Text("error"),
                      imageBuilder: (context, imageProvider) => CircleAvatar(
                        radius: 120,
                        backgroundImage: imageProvider,
                      ),
                      placeholder: (context, url) => CircularProgressIndicator(
                        backgroundColor: primary,
                      ),
                    ),

- Sanjay Adhikari