cached_network_image란?
cached_network_image는 인터넷 서버(URL)에 있는 이미지를 불러와서 화면에 보여주고, 스마트폰의 로컬 저장소(캐시)에 자동으로 임시 저장해 주는 Flutter의 필수 UI 패키지입니다. Flutter의 기본 위젯인 Image.network()는 이미지를 불러올 수는 있지만, 앱을 껐다 켜거나 화면을 다시 그릴 때마다 매번 인터넷에서 새로 다운로드를 받습니다. 이 패키지를 사용하면 데이터 낭비를 막고, 로딩 속도를 획기적으로 올리며, 로딩 중 스피너나 실패 시 에러 화면까지 처리할 수 있습니다.
설치
dependencies:
flutter:
sdk: flutter
cached_network_image: ^3.3.1사용
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
class ProfileImageWidget extends StatelessWidget {
final String imageUrl;
const ProfileImageWidget({Key? key, required this.imageUrl}) : super(key: key);
@override
Widget build(BuildContext context) {
return CachedNetworkImage(
imageUrl: imageUrl, // 1. 네트워크 이미지 URL 주소
// 2. 이미지를 다운로드하는 동안 보여줄 위젯 (로딩 스피너)
placeholder: (context, url) => const Center(
child: CircularProgressIndicator(),
),
// 3. 주소가 잘못되었거나 네트워크 에러로 로딩 실패 시 보여줄 위젯
errorWidget: (context, url, error) => const Center(
child: Icon(Icons.error, color: Colors.red),
),
// 4. (선택) 이미지 크기 맞춤 설정
fit: BoxFit.cover,
width: 100,
height: 100,
);
}
}Swift와 비교
Flutter(cached_network_image) |
Swift(KingFisher, SDWebImage) |
역할 |
|---|---|---|
기본 Image.network |
Data(contentsOf: url) |
캐싱 없이 매번 통신해서 이미지를 그리는 원시적인 방법 |
CachedNetworkImage 위젯 |
KFImage(url)/UIImageView.kf.setImage |
URL을 주면 알아서 캐시 확인 후 그려주는 뷰 |
| 디스크(Disk)/메모리 캐싱 | ImageCache.default |
내부적으로 이미지를 RAM과 저장소(앱 샌드박스)에 임시 저장하는 동작 |
placeholder |
placeholder 파라미터 |
이미지를 받아오는 동안 임시로 보여주는 회색 박스나 스피너 |
errorWidget |
failureImage/catch 핸들러 |
주소가 깨지거나 다운로드 실패 시 보여줄 기본 이미지(Fallback) |
| SwiftUI 기본 내장 | AsyncImage(url:) |
최근 iOS에 기본 내장되었지만 여전히 세밀한 캐싱은 KingFisher를 씀 |
사용 흐름
- 위젯 렌더링 & URL 요청 : 화면에
CachedNetworkImage가 등장하면 패키지는 전달받은 URL 문자열을 키값으로 사용합니다. - 캐시 유무 확인 : 서버에 요청을 보내기 전에, 스마트폰의 메모리나 저장소에 똑같은 URL로 저장해 둔 이미지 파일이 있는지 검사합니다.
- 로딩 UI 표시(placeholder) : 캐시에 없다면 인터넷에서 받아와야 하므로, 다운로드가 완료될 때까지 placeholder 위젯을 화면에 보여줍니다.
- 다운로드 및 캐시 저장 : 서버에서 이미지 수신이 완료되면, 나중에 또 쓸 수 있도록 기기에 임시 파일을 저장해 두고 메모리에 올려놓습니다.
- 완료 및 에러 핸들링 : 정상이면 이미지를 화면에 띄우고(
fit옵션에 따라 크기 조절), 통신이 끊겼거나 주소가 이상하면errorWidget을 띄워 앱이 튕기거나 멈추는 것을 방지합니다.