如何使用 cached_network_image 預加載圖像？

Question

我剛剛實現了 Flutter package 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，文件總是會再次被緩存。

Answer 1

您可以像這樣使用Flutter 緩存管理器

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

稍后，只需像這樣使用您的緩存圖像

child: CachedNetworkImage(imageUrl: MY_IMAGE_URL,),

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,
              ),
            );

Answer 3

 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,
                      ),
                    ),