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

11 Dec 2023

flutter

이번 포스트에서는 플러터를 사용하여 포토 갤러리 애니메이션을 만드는 방법을 살펴보겠습니다. 이 애니메이션에는 사용자가 이미지를 선택하고 로딩되는 과정을 보여주기 위해 shimmer 효과를 활용할 것입니다.

준비물

플러터 개발 환경
flutter_shimmer 라이브러리

flutter_shimmer 라이브러리

flutter_shimmer 라이브러리는 플러터에서 shimmer 효과를 생성하는 데 사용됩니다. 이 효과를 사용하면 로딩되는 동안 보여줄 수 있는 애니메이션 효과를 쉽게 만들 수 있습니다.

앱의 포토 갤러리 애니메이션 구현

먼저, flutter_shimmer 라이브러리를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 라이브러리를 추가해줍니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_shimmer: ^2.0.0

다음으로, 포토 갤러리 화면을 만들고 이미지를 표시할 때 shimmer 효과를 적용하려면 아래와 같이 코드를 작성할 수 있습니다.

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

class PhotoGalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('포토 갤러리'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 4.0,
          mainAxisSpacing: 4.0,
        ),
        itemCount: 10,
        itemBuilder: (BuildContext context, int index) {
          return Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: Container(
              width: 100.0,
              height: 100.0,
              color: Colors.white,
            ),
          );
        },
      ),
    );
  }
}

위 코드는 flutter_shimmer 라이브러리를 사용하여 shimmer 효과를 적용한 갤러리 화면을 구현한 예시입니다. Shimmer.fromColors 위젯을 사용하여 각 이미지가 로드될 때 표시되는 로딩 효과를 구현할 수 있습니다.

마치며

이렇게하면 플러터를 사용하여 포토 갤러리 화면에 shimmer 효과를 적용하는 방법에 대해 알아보았습니다. 이를 통해 사용자가 이미지를 선택하고 로딩되는 동안 부드러운 애니메이션 효과를 제공할 수 있습니다.