[flutter] cached_network_image 패키지를 사용하여 이미지 로딩 실패 시 대체 이미지를 설정하는 방법을 알려주세요.

08 Dec 2023

flutter

Flutter에서 이미지를 네트워크에서 로드하는 데는 cached_network_image 패키지가 자주 사용됩니다. 이 패키지를 사용하여 이미지 로드 시 실패할 경우 대체 이미지를 설정하는 방법에 대해 알아보겠습니다.

cached_network_image 패키지 설치

먼저, pubspec.yaml 파일에 cached_network_image 패키지를 추가합니다.

dependencies:
  cached_network_image: ^3.1.0

이후 패키지를 설치하고 임포트합니다.

import 'package:cached_network_image/cached_network_image.dart';

실패 시 대체 이미지 설정

cached_network_image의 CachedNetworkImage 위젯을 사용하여 이미지를 로드하고, errorWidget 속성을 통해 실패 시 대체 이미지를 설정할 수 있습니다.

CachedNetworkImage(
  imageUrl: 'URL_이_여기에_들어갑니다',
  errorWidget: (context, url, error) => Icon(Icons.error),
  placeholder: (context, url) => CircularProgressIndicator(),
),

위 코드에서 errorWidget 속성은 이미지 로딩 실패 시 대체할 위젯을 설정합니다. 이 예제에서는 실패 시 에러 아이콘을 표시하도록 설정되었습니다.

이제 cached_network_image 패키지를 사용하여 이미지 로딩 실패 시 대체 이미지를 설정하는 방법에 대해 알아보았습니다. 실패 시 대체 이미지를 설정하면 사용자에게 더 나은 사용자 경험을 제공할 수 있습니다.

참고 자료

cached_network_image 패키지 공식 문서