[flutter] cached_network_image package

플러터 cached_network_image 패키지로 이미지 캐시 처리

이미지가 많은 앱 페이지를 실행하면 이미지를 불러오고, 정상적으로 출력하기까지 아주 잠깐이지만 시간이 소요됩니다. 이때 사용자는 빈 공간의 이미지 영역이 채워지는 과정에서 깜빡이는 현상을 경험할 수 있습니다.

 

또 사용자가 인터넷이 연결되지 않은 오프라인 상태에서 앱을 실행하면, 이미지를 다운로드 받지 못해 앱을 이용하는데 큰 불편을 느낄 수 있습니다. 개인적으로 이런 사소한 부분이 앱의 완성도와 사용자 경험을 높인다고 생각합니다.

 

플러터에서는 cached_network_image 패키지를 사용하면 이런 이슈를 해결할 수 있습니다. 이 패키지는 일정 기간 동안 다운로드 받은 이미지를 캐시 저장소에 저장하여, 오프라인에서도 캐시 저장소에서 이미지를 로딩하여 사용자가 앱을 원활하게 이용할 수 있도록 도와줍니다.

 

패키지 설치

패키지 최신 버전을 확인하고, pubspec.yaml 파일의 dependencies 항목에 패키지를 추가합니다. (https://pub.dev/packages/cached_network_image)

// pubspec.yaml
dependencies:
  cached_network_image: ^3.2.0

 

샘플 코드

1. CachedNetworkImage() 위젯을 사용하는 방법.

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/350x150",
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

 

2. Image() 위젯에서 CachedNetworkImageProvider() 사용하는 방법.

Image(image: CachedNetworkImageProvider(url)),

 

3. CachedNetworkImage() 위젯을 다른 위젯과 함께 사용하는 방법. 예를 들어 사용자 프로필 썸네일이나 주식 종목 이미지를 라운딩 처리하는 데 사용할 수 있습니다.

CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: imageProvider,
        fit: BoxFit.cover,
      ),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),

 

샘플 코드가 정상적으로 작동하지 않거나, 궁금하신 게 있으시면 댓글 남겨주세요~ 부족하지만 아는 만큼 성실히 답변드릴게요. 제 코드 살펴봐주셔서 감사합니다~😊