[flutter] cached_network_image 패키지를 사용하여 이미지가 로딩되었을 때 애니메이션을 적용하는 방법을 알려주세요.

08 Dec 2023

flutter

cached_network_image 패키지는 Flutter 앱에서 네트워크에서 이미지를 캐싱하고 표시하는 데 사용됩니다. 이미지가 로딩되는 동안 애니메이션을 적용하려면 아래와 같이 할 수 있습니다.

1. cached_network_image 패키지 추가하기

우선, pubspec.yaml 파일에 cached_network_image 패키지를 추가합니다. 아래와 같은 형식으로 dependencies에 추가합니다.

dependencies:
  cached_network_image: ^3.1.0

그리고 이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. 이미지 로딩 애니메이션 적용하기

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class AnimatedNetworkImage extends StatelessWidget {
  final String imageUrl;

  const AnimatedNetworkImage({Key? key, required this.imageUrl}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: imageUrl,
      placeholder: (context, url) => **FadeInImage.assetNetwork(
        placeholder: 'assets/placeholder.png',
        image: url,
        fit: BoxFit.cover,
      )**,
      errorWidget: (context, url, error) => Icon(Icons.error),
    );
  }
}

위 코드에서 placeholder 속성에 사용된 FadeInImage.assetNetwork 위젯은 이미지가 로딩되는 동안 placeholder 이미지를 보여주고, 이미지가 로딩되면 페이드 효과를 통해 해당 이미지로 전환됩니다.

이제 AnimatedNetworkImage 위젯을 사용하여 원하는 곳에서 이미지를 로딩할 수 있습니다.

이렇게 하면 cached_network_image 패키지를 사용하여 이미지가 로딩될 때 애니메이션을 적용할 수 있습니다.