CachedNetworkImage keeps requesting Network with same image URL in Flutter

Hyejung
May 30, 2024
247 views
0 votes
2 Answers

I’ve noticed that my flutter app consumes abnormal amount of data.

I use supabase as my backend.

This app has menu feed and user post images from each feed.

And I save image to supabase storage and store returned image url from storage to table images in supabase.

When user clicks this feed, each post shows each image as fetching image url from table.

And in order to save consumption of Network, I’ve used CachedNetworkImage and save this images in about 2 days.

final CacheManager diaryCacheManager = CacheManager(
      Config(
        'diary_image',
        stalePeriod: const Duration(days: 2), //secs, mins...
      ),
    );

CachedNetworkImage(
            imageUrl: mediaURL,
            memCacheHeight: widthMemCache(context, size),
            cacheManager: diaryCacheManager,
            placeholder: (context, url) {
              return Stack(
                fit: StackFit.expand,
                alignment: Alignment.center,
                children: [
                  const SkeletonAvatar(
                    style: SkeletonAvatarStyle(
                      shape: BoxShape.rectangle,
                    ),
                  ),
                  Image.network(
                    url,
                    fit: BoxFit.cover,
                  )
                ],
              );
            },
            errorWidget: (context, url, error) => const Center(
              child: Text(
                "불러올 수 없는 사진입니다.",
                style: TextStyle(
                  fontWeight: FontWeight.w600,
                ),
              ),
            ),
            fadeInDuration: Duration.zero,
            fadeOutDuration: Duration.zero,
            fit: BoxFit.cover,
          );

But when I check Flutter Devtools Network page, This feed keeps requesting image file.

I exit my app and re-enter this feed menu, network request happens again even with same image url.

Why does this happen, is this normal of CachedNetworkImage ?

And How can I prevent this thing?

Tags: flutter

Answers

use CacheManager Configuration

try something like this

final CacheManager diaryCacheManager = CacheManager(
  Config(
    'diary_image',
    stalePeriod: const Duration(days: 2),
  ),
);

CachedNetworkImage(
  imageUrl: mediaURL,
  cacheManager: diaryCacheManager,
  placeholder: (context, url) => const SkeletonAvatar(
    style: SkeletonAvatarStyle(
      shape: BoxShape.rectangle,
    ),
  ),
  errorWidget: (context, url, error) => const Center(
    child: Text(
      "불러올 수 없는 사진입니다.",
      style: TextStyle(
        fontWeight: FontWeight.w600,
      ),
    ),
  ),
  fadeInDuration: Duration.zero,
  fadeOutDuration: Duration.zero,
  fit: BoxFit.cover,
);

you also can log to get closer to your problem

diaryCacheManager.getFileFromCache(mediaURL).then((fileInfo) {
  if (fileInfo != null) {
    print('Cache hit: ${fileInfo.file.path}');
  } else {
    print('Cache miss');
  }
});

In the placeholder, you are displaying the network image which seems to be fetching again from the URL.

Try using an asset image or an icon as the placeholder

    CachedNetworkImage(
        imageUrl: mediaURL,
        memCacheHeight: widthMemCache(context, size),
        cacheManager: diaryCacheManager,
        placeholder: (context,_) {
          return SkeletonAvatar(                    <= removed the Image.network() to avoid calling the image url 
                    style: SkeletonAvatarStyle(
                      shape: BoxShape.rectangle,
                    ),
                );
        },
        errorWidget: (context, url, error) => const Center(
          child: Text(
            "불러올 수 없는 사진입니다.",
            style: TextStyle(
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
        fadeInDuration: Duration.zero,
        fadeOutDuration: Duration.zero,
        fit: BoxFit.cover,
      );

Please signup or login to give your own answer.

Click here to cancel reply.