[flutter] 플러터 shimmer 애니메이션 효과

11 Dec 2023

flutter

플러터(Flutter) 앱에서 사용자에게 로딩 상태나 데이터 로딩 중임을 시각적으로 전달하고 싶은 경우가 있을 것입니다. Shimmer 애니메이션은 이러한 상황에서 유용하게 사용될 수 있습니다. Shimmer 애니메이션은 간단한 코드 몇 줄만으로 빛나는 효과를 만들어내어 사용자의 주의를 끄는 효과를 낼 수 있습니다. 이번 포스트에서는 플러터 앱에 Shimmer 애니메이션을 추가하는 방법에 대해 알아보겠습니다.

Shimmer 패키지 설치

우선, shimmer 패키지를 플러터 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가해 주세요.

dependencies:
  shimmer: ^2.0.0

이후 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치해 주세요.

Shimmer 애니메이션 사용하기

이제, Shimmer 애니메이션을 화면에 추가해 보겠습니다. 예를 들어, 다음과 같이 리스트 아이템에 Shimmer 애니메이션을 추가할 수 있습니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shimmer 애니메이션'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: ListTile(
                leading: CircleAvatar(
                  backgroundColor: Colors.white,
                  radius: 30,
                ),
                title: Text('로딩 중'),
                subtitle: Text('로딩 중'),
              ),
            );
          },
        ),
      ),
    );
  }
}

위 예제 코드에서는 shimmer 패키지의 Shimmer.fromColors 위젯을 사용하여 리스트 아이템에 Shimmer 애니메이션을 적용하고 있습니다. baseColor와 highlightColor를 설정하여 Shimmer 애니메이션의 색상을 지정할 수 있습니다.

정리

이제 플러터 앱에서 Shimmer 애니메이션을 사용하는 방법에 대해 알아보았습니다. Shimmer 애니메이션을 통해 사용자에게 로딩 상태를 직관적으로 전달할 수 있으며, 사용자 경험을 향상시키는 데 도움이 될 수 있습니다.

더 많은 기능과 옵션에 대해 알아보고 싶다면 shimmer 패키지 문서를 확인해 보세요.

참고 자료

Flutter Shimmer package