network image 캐싱하기

ListView로 네트워크 이미지를 뿌렸는데 다른 페이지에 있다가 다시 돌아오면 재로딩을 하게 된다.

 

현재 이미지를 가져오는 방식에는 캐시가 적용되지 않는다.

Image.network("https://picsum.photos/id/237/200/200"),

 

이를 해결하기 위해 플러터가 공인한 패키지를 사용해보도록 하자.

(https://pub.dev/packages/cached_network_image)

 

자세한 사용법은 공식 문서를 보는 것이 좋지만 사용법 자체각 워낙 간단해서...

CachedNetworkImage(
   imageUrl: "https://picsum.photos/id/237/200/200",
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
),

 

 

해당 이미지를 컨트롤하기 위해서는 CachedNetworkImage 의 속성인 imageBuilder를 수정해주면 된다.

imageProvider에 우리가 imageUrl로 가져온 이미지 정보가 담겨 있습니다.

CachedNetworkImage(
  imageUrl: "https://picsum.photos/id/${index + 150}/200/200",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  imageBuilder: (context, imageProvider) =>
    AspectRatio(
      aspectRatio: 1,
      child: Container(
        decoration: BoxDecoration(
        image: DecorationImage(
           image: imageProvider, fit: BoxFit.cover),
		),
     ),
  ),
)

 

 

물론 CachedNetworkImage 를 통으로 쓰는 것이 아니라 CachedNetworkImageProvider를 활용할 수도 있습니다.

 

Image(
  image: CachedNetworkImageProvider(
   'http://via.placeholder.com/350x150',
)