FadeInImage class
대상 image 가 로드되는 동안 placeholder 이미지를 표시한 다음, 새 이미지가 로드되면 페이드인되는 이미지입니다.
NetworkImage.new 와 같이 로딩이 긴 이미지를 표시하는 데 이 클래스를 사용하면 이미지가 갑자기 화면에 나타나는 것이 아니라 우아한 애니메이션과 함께 화면에 나타납니다.
이미지가 로드되고 캐시 될 때와 같이 이미지가 동기적으로 ImageInfo를 내보내는 경우 , 이미지는 즉시 표시되고 플레이스홀더 는 표시되지 않습니다.
fadeOutDuration 및 fadeOutCurve 속성 은 플레이스홀더의 페이드아웃 애니메이션을 제어합니다.
fadeInDuration 및 fadeInCurve 속성 은 대상 이미지의 페이드인 애니메이션을 제어합니다.
이미 캐시 된 플레이스홀더를 사용 하면 즉시 표시됩니다. 이렇게 하면 화면에 갑자기 나타나지 않습니다.
이미지가 변경 되면 새로운 ImageStream 으로 변환됩니다. 새 ImageStream.key 가 다르면 이 위젯은 새 스트림을 구독하고 표시된 이미지를 새 스트림에서 생성된 이미지로 바꿉니다.
플레이스홀더가 변경되고 이미지가 아직 ImageInfo를 내보내지 않은 경우 , 플레이스홀더는 새로운 ImageStream 으로 변환됩니다. 새로운 ImageStream.key 가 다르면 이 위젯은 새 스트림을 구독하고 표시된 이미지를 새 스트림에서 내보내는 이미지로 대체합니다.
플레이스홀더 나 이미지가 변경 되면 이 위젯은 새로운 이미지 제공자가 다른 이미지를 제공할 때까지 이전에 로드된 이미지(있는 경우)를 계속 표시합니다. 이를 "갭리스 재생"이라고 합니다( Image.gaplessPlayback 참조 ).
공식 문서 코드
FadeInImage 는 우리가 흔히 생각하는 로더 기능을 편하게 구현해 주는 위젯이다.
FadeInImage(
// TODO
placeholder: MemoryImage(bytes),
image: const NetworkImage('https://backend.example.com/image.png'),
)
image 부분에 자신이 원하는 네트워크 이미지를 넣고 placeholder 부분에는 그 이미지가 로드될 동안 보여줄 다른 이미지를 넣으면 되겠다.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| placeholder | ImageProvider | – | 로딩 중에 표시될 플레이스홀더 이미지 |
| placeholderErrorBuilder | ImageErrorWidgetBuilder? | null | 플레이스홀더 로딩 실패 시 대체 위젯을 반환하는 함수 |
| image | ImageProvider | – | 로딩 완료 후 표시될 이미지 |
| imageErrorBuilder | ImageErrorWidgetBuilder? | null | 이미지 로딩 실패 시 대체 위젯을 반환하는 함수 |
| fadeOutDuration | Duration | 300ms | 플레이스홀더가 사라지는 데 걸리는 시간 |
| fadeOutCurve | Curve | Curves.easeOut | 플레이스홀더 페이드 아웃 애니메이션 곡선 |
| fadeInDuration | Duration | 700ms | 이미지가 나타나는 데 걸리는 시간 |
| fadeInCurve | Curve | Curves.easeIn | 이미지 페이드 인 애니메이션 곡선 |
| width | double? | null | 이미지의 너비 |
| height | double? | null | 이미지의 높이 |
| fit | BoxFit? | null | 이미지의 박스 채우기 방식 |
| placeholderFit | BoxFit? | null | 플레이스홀더의 박스 채우기 방식 (fit을 기본값으로 사용) |
| filterQuality | FilterQuality | FilterQuality.medium | 이미지의 렌더링 품질 |
| placeholderFilterQuality | FilterQuality? | null | 플레이스홀더의 렌더링 품질 |
| color | Color? | null | 이미지에 적용할 색상 |
| colorBlendMode | BlendMode? | null | 이미지 색상 블렌딩 모드 |
| placeholderColor | Color? | null | 플레이스홀더에 적용할 색상 |
| placeholderColorBlendMode | BlendMode? | null | 플레이스홀더 색상 블렌딩 모드 |
| alignment | AlignmentGeometry | Alignment.center | 이미지 정렬 위치 |
| repeat | ImageRepeat | ImageRepeat.noRepeat | 이미지 반복 여부 |
| matchTextDirection | bool | false | 텍스트 방향에 따라 이미지 반전 여부 |
| excludeFromSemantics | bool | false | 시맨틱 처리에서 이미지를 제외할지 여부 |
| imageSemanticLabel | String? | null | 스크린 리더를 위한 이미지 설명 텍스트 |
이미지를 처리하는 위젯인 만큼 이미지의 속성을 조절할 수 있는 하위 값이 많은 편이다.
공식 영상에서는 fadeInDuration 과 fadeOutCurve 를 사용하여 페이드 되는 시간과 애니메이션 커브 값을 조절해주고 있는 모습이다.
이렇게 FadeInImage 위젯을 알아보았는데 솔직히 꽤 괜찮은 위젯인 것 같다. 굳이 로더 코드 안 짜고 넣어도 되긴 하지만 솔직히 이미지가 페이드 되는 상황이 막상 많이 있을지는 의문인 점이긴 하다. 또한 가장 아쉬운 것은 그냥 플레이스홀더에 Widget<T>? 이런 거 넣게 했으면 훨씬 좋지 않았을까.. 싶다.
도움이 되었길 바라며 마치겠다.
