FadeInImage

하요·2024년 6월 20일

Flutter Widget of the Week

목록 보기

15/18

Flutter에서 이미지 전환 효과 주기: FadeInImage

애플리케이션에서 이미지를 로드할 때, 특히 네트워크를 통해 이미지를 가져오는 경우, 원활하고 시각적으로 매끄러운 사용자 경험을 제공하는 것이 중요합니다. FadeInImage 위젯은 이러한 필요를 해결해 주며, 로딩 중에 자리 표시자 이미지를 보여주고 실제 이미지가 로드되면 페이드 애니메이션으로 전환합니다.

주요 속성

placeholder: 실제 이미지가 로드되기 전에 표시할 자리 표시자 이미지입니다. 보통 AssetImage를 사용하여 로컬에 저장된 이미지를 지정합니다.
image: 로드할 실제 이미지입니다. 보통 NetworkImage를 사용하여 네트워크에서 이미지를 가져옵니다.
fadeInDuration: 자리 표시자 이미지에서 실제 이미지로 전환되는 페이드 애니메이션의 지속 시간입니다. 기본값은 300ms입니다.
fadeInCurve: 페이드 애니메이션의 커브를 지정합니다. 기본값은 Curves.easeIn입니다.
placeholderErrorBuilder: 자리 표시자 이미지를 로드하는 동안 오류가 발생했을 때 대체할 위젯을 지정합니다.
imageErrorBuilder: 실제 이미지를 로드하는 동안 오류가 발생했을 때 대체할 위젯을 지정합니다.

주요 활용도

네트워크 이미지 로드: 네트워크를 통해 이미지를 가져올 때 자리 표시자를 제공하여 더 나은 사용자 경험을 제공합니다.
로딩 상태 표시: 이미지 로드 전, 자리 표시자 이미지를 통해 로딩 상태를 시각적으로 전달합니다.
부드러운 전환 효과: 실제 이미지가 로드되면 자리 표시자에서 부드럽게 페이드 인 전환 효과를 적용하여 자연스러운 UI를 만듭니다.

코드 예제

아래 예제는 FadeInImage를 사용하여 네트워크에서 이미지를 로드하고, 로딩 중에는 로컬에 저장된 자리 표시자 이미지를 보여주는 방법을 설명합니다.

FadeInImage(
  placeholder: AssetImage('assets/placeholder.png'),
  image: NetworkImage('https://example.com/image.jpg'),
  fadeInDuration: Duration(milliseconds: 500),
  fadeInCurve: Curves.easeIn,
  placeholderErrorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
  imageErrorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)

FadeInImage의 작동 방식

이미지가 동기적으로 ImageInfo를 내보내면:
- 이미지가 이미 로드되었거나 캐시된 경우, 이미지가 즉시 표시됩니다. 이 경우 자리 표시자 이미지는 아예 표시되지 않습니다.
캐시된 자리 표시자 사용 권장:
- 자리 표시자 이미지를 이미 캐시된 이미지를 사용하면 즉시 표시되어 화면에 팝업되는 현상을 방지합니다.
이미지 변경 시:
- 이미지가 변경되면 새로운 ImageStream으로 해석됩니다. 만약 새 ImageStream.key가 이전 것과 다르면, 위젯은 새 스트림에 구독하고 새 스트림에서 내보낸 이미지로 현재 표시된 이미지를 교체합니다.
자리 표시자 변경 시:
- 실제 이미지가 아직 로드되지 않았을 때, 자리 표시자가 변경되면 새로운 ImageStream으로 해석됩니다. 이때 새로운 ImageStream.key가 이전 것과 다르면, 위젯은 새로운 스트림에 구독하고 새 스트림에서 내보내는 이미지로 현재 표시된 이미지를 교체합니다.
자리 표시자 또는 이미지 변경 시:
- 자리 표시자나 이미지가 변경되면, 새로운 이미지 공급자가 다른 이미지를 제공할 때까지 이전에 로드된 이미지를 계속해서 표시합니다. 이를 "간격 없는 재생(gapless playback)"이라고 합니다.

추가 팁

로컬 및 네트워크 이미지 혼합: 네트워크 이미지가 아닌 로컬 이미지로도 전환할 수 있습니다. 이 경우 AssetImage나 FileImage 등을 사용할 수 있습니다.
애니메이션 커스터마이징: fadeInDuration과 fadeInCurve 속성을 통해 전환 애니메이션을 세부적으로 조정할 수 있습니다.
오류 처리: placeholderErrorBuilder와 imageErrorBuilder를 사용하여 이미지 로드 오류 시 사용자에게 적절한 피드백을 제공할 수 있습니다.
transparent_image 패키지 사용: transparent_image 패키지를 사용하면 매우 작은 크기의 투명 PNG 이미지를 자리 표시자로 사용할 수 있습니다. 이는 로딩 속도를 높이고, 자리 표시자가 화면에 갑자기 나타나는 것을 방지하여 더 나은 사용자 경험을 제공합니다. 이 패키지를 사용하여 자리 표시자 이미지를 설정하는 방법은 다음과 같습니다: