[flutter] 플러터 shimmer를 활용한 앱의 이미지 갤러리 애니메이션

11 Dec 2023

flutter

이번에는 플러터에서 제공하는 Shimmer 패키지를 활용하여 앱의 이미지 갤러리 애니메이션을 구현해보겠습니다. Shimmer는 로딩 중인 콘텐츠를 사용자에게 시각적으로 전달하는 데 사용되며 부드러운 애니메이션 효과를 제공합니다.

Shimmer 패키지 추가

우선, pubspec.yaml 파일에 다음과 같이 shimmer 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

이후, 터미널에서 아래 명령을 실행하여 패키지를 설치합니다.

flutter pub get

이미지 갤러리 애니메이션 구현

이미지 갤러리 페이지를 만든 다음, 각 이미지 위에 Shimmer 위젯을 쌓아줍니다.

아래는 간단한 예시 코드입니다.

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

class ImageGallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: 10,
      itemBuilder: (ctx, index) {
        return Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: Container(
            width: 150,
            height: 150,
            color: Colors.white,
          ),
        );
      },
    );
  }
}

위 코드에서는 GridView.builder를 사용하여 이미지를 배치하고, Shimmer.fromColors로 각 이미지를 감싼 후 baseColor와 highlightColor를 지정하여 애니메이션 효과를 부여하였습니다.

정리

이렇게 Shimmer 패키지를 활용하여 플러터로 이미지 갤러리 페이지에 부드러운 애니메이션을 적용할 수 있습니다. 이를 통해 사용자가 콘텐츠 로딩 상태를 시각적으로 확인할 수 있어 UX를 향상시킬 수 있습니다.

참고 자료

Shimmer 패키지: pub.dev에서 확인하기
Flutter GridView.builder: 공식 문서에서 확인하기