[플러터] 이미지를 cache 저장소에 저장하기

스마트폰을 사용하다보면 앱의 저장공간에 캐시라는 공간이 별도로 존재하는 것을 보았을 것이다.

cache(캐시)라고 불리는 것에는 cache 저장소와 cache memory 2가지가 있다.

cache란 데이터를 빠르게 불러오기 위해 할당된 공간이라고 생각하면 된다.

 

오늘은 이미지를 cache 저장소에 저장하는 방법을 알아본다.

cache memory에 이미지를 올려두는 방법은 다음 글에서 포스팅하겠다.

Cache 저장소

서버와 같이 네트워크에 존재하는 이미지를 Image.network()로 호출한다면 매번 서버에 접속해야한다.

하지만 서버와의 통신시간은 짧지 않아 로딩이 발생하고 그에 따른 비용도 발생한다.

그래서 일반적으로 서버에 접속해서 이미지를 최초 1회만 호출을 하고 이후에는 사용자 기기(로컬)의 cache 저장소에 이미지를 저장한다.

이 후 동일한 이미지를 호출시에는 서버에 접속하지 않고 로컬의 cache에서 곧바로 이미지를 불러와 로딩 시간도 짧아진다.

 

플러터에서는 패키지로 구현할 수 있다.

 

pubspec.yaml

  dependencies:
  	cached_network_image: ^2.3.3

 

cache에 이미지를 저장

CachedNetworkImageProvider(imageURL);

위와 같은 한줄로 간단하게 이미지를 cache 저장소에 저장할 수 있다.

이미지는 imageURL을 파일명으로 하여 cache 저장소에 저장된다.

이미지가 이미 cache에 있다면 다른 동작을 하지 않는다.

 

cache에서 이미지 호출

Image(
image: CachedNetworkImageProvider(imageURL))

위처럼 아주 간단하게 cache 저장소에서 이미지를 호출 할 수 있다.

Image 위젯으로 감싸주는 것도 단독으로 함수를 사용하는 것과 마찬가지로

cache에서 확인 후 없다면 이미지를 불러와 cache에 저장한다. 그리고 그와 동시에 화면에 출력한다.

 

 

또 다른 패키지

비슷한 기능의 또 다른 패키지이다. 조금 더 상세한 옵션이 존재한다.

 

extended_image | Flutter Package

이미지 이외의 파일을 저장해야한다면

아래 패키지의 일부분으로, 만약 이미지에 국한되지 않은 파일에서 cache 사용이 필요하다면 아래 패키지를 사용하면 된다.

flutter_cache_manager | Flutter Package