[Flutter] CacheNetWorkImage 캐시 갱신 문제 개선법

 

Flutter 앱에서 이미지 캐싱을 제대로 관리하지 않으면, 이미지가 변경되었음에도 불구하고 사용자에게는 이전 이미지가 계속 보이는 문제가 발생할 수 있습니다. 이 글에서는 CachedNetworkImage를 사용하는 경우, 이러한 캐시 갱신 문제를 해결하는 방법을 소개합니다.

 

CachedNetworkImage는 이미지를 네트워크로부터 불러오고, 캐시에 저장해서 다음 로딩 시 성능을 개선합니다. 하지만 다음과 같은 상황이 발생했습니다.

• 이미지의 URL은 동일하지만,
• 서버의 이미지가 새로운 이미지로 변경됨.
• 앱에서는 여전히 변경 전 이미지가 보임.

즉, 캐시된 이미지가 오래된 상태로 남아 있는 것이죠.

 

CachedNetworkImage(
imageUrl: testImage,
)

이 경우, default 설정값동안 해당 URL에 대해 동일한 이미지가 보여지게 됩니다. 이미지의 URL이 변경되지 않는다면, 새로운 이미지는 받아올 수 없습니다.

 

이를 해결하기 위해 flutter_cache_manager를 직접 설정해 stalePeriod를 단축시키는 방식으로 캐시 주기를 조절했습니다.

 

class CustomCacheManager {
  static const key = 'customCacheKey';
  static CacheManager instance = CacheManager(
    Config(
      key,
      stalePeriod: const Duration(minutes: 30),
      repo: JsonCacheInfoRepository(databaseName: key),
      fileSystem: IOFileSystem(key),
      fileService: HttpFileService(),
    ),
  );
}

CustomCacheManager.dart

 

그리고 CachedNetworkImage에 적용합니다.

CachedNetworkImage(
imageUrl: testImage,
CacheManager: CustomCacheManager.instance,
)

 

또 다른 방법으로는 강제로 캐시를 삭제할 수 있습니다.

await CustomCacheManager.instance.removeFile(key)

 

정리

• 이미지 URL이 동일하면 캐시된 이미지가 계속 노출됨.
• flutter_cache_manager를 사용해 stalePeriod를 조절하면 해결 가능.
• 필요시 수동으로 캐시를 무효화하거나, 쿼리 파라미터로 URL을 변경하는 것도 방법.

• flutter_cache_manager pub.dev
• cached_network_image pub.dev