플러터(Flutter)로 각종 커스텀 애니메이션을 구현하는 데 있어 shimmer 효과를 활용하는 것은 매우 인기 있는 기술 중 하나입니다. Shimmer 효과는 앱의 UI에 살아있는 듯한 빛의 반사효과를 주어 더욱 생생하고 동적인 느낌을 연출할 수 있습니다.

이번 블로그에서는 플러터에서 shimmer 효과를 활용하여 간단한 커스텀 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Shimmer 패키지 설치하기

우선 플러터 프로젝트에 Shimmer 패키지를 사용할 수 있도록 설정해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 아래와 같이 Shimmer 패키지를 추가하세요.

dependencies:
  shimmer: ^2.0.0

추가적으로, 터미널에서 아래 명령을 실행하여 패키지를 설치합니다.

flutter pub get

Shimmer로 커스텀 애니메이션 구현하기

이제 Shimmer 패키지를 사용하여 커스텀 애니메이션을 구현해보겠습니다. 예를 들어, 사각형의 형태로 나타나는 애니메이션을 구현하고자 한다면 아래와 같이 코드를 작성할 수 있습니다.

먼저, Shimmer.fromColors() 위젯을 사용하여 Shimmer 애니메이션을 생성합니다.

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

class CustomShimmerAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      period: Duration(milliseconds: 1500),
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.white,
      ),
    );
  }
}

위 코드에서는 Shimmer.fromColors() 위젯으로 기본색과 강조색, 그리고 애니메이션 속도를 설정하여 Container 위젯을 감싸고 있습니다. 위젯 트리에서 CustomShimmerAnimation을 사용하면 해당 애니메이션이 나타나게 됩니다.

이제 플러터 앱에서 CustomShimmerAnimation 위젯을 사용하여 커스텀 할 수 있는 다양한 애니메이션을 구현할 수 있습니다.

위와 같이 shimmer를 이용하여 플러터에서 간단한 커스텀 애니메이션을 구현하는 방법에 대해 알아보았습니다. 다양한 색상과 종류의 shimmer 애니메이션을 활용하여 앱에 생동감을 불어넣어 보세요!

더 많은 정보는 Shimmer 패키지 공식 문서를 참고해보세요.