플러터(Flutter) 앱에서는 사용자 경험을 향상시키기 위해 다양한 애니메이션을 활용할 수 있습니다. 타이머 애니메이션에 shimmer 효과를 적용하면 사용자가 대기 중인 것처럼 보이는 화면을 만들 수 있습니다. 이번 글에서는 Flutter의 shimmer 패키지를 사용하여 타이머 애니메이션을 구현하는 방법을 알아보겠습니다.

1. Shimmer 패키지 추가하기

먼저 shimmer 패키지를 Flutter 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 아래와 같은 내용을 추가합니다.

dependencies:
  shimmer: ^2.0.0

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

2. Shimmer 애니메이션 구현하기

타이머 애니메이션에 shimmer 효과를 적용하려면 Shimmer.fromColors() 위젯을 사용합니다. 아래 예시 코드는 Shimmer.fromColors()를 이용해 타이머 애니메이션에 shimmer 효과를 적용한 예시입니다.

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

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

이제 TimerShimmer 위젯을 화면에 표시하면, 흐린 효과(shimmer) 가 적용된 타이머 애니메이션을 확인할 수 있습니다.

3. Shimmer 애니메이션 속도 및 방향 설정하기

shineDuration 속성을 사용하여 shimmer 애니메이션의 지속시간을, direction 속성을 사용하여 shimmer 애니메이션의 방향을 설정할 수 있습니다. 아래 예시 코드는 shineDuration 속성과 direction 속성을 추가한 예시입니다.

Shimmer.fromColors(
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
  direction: ShimmerDirection.ltr,
  shineDuration: Duration(seconds: 2),
  child: Container(
    width: 200.0,
    height: 100.0,
    color: Colors.white,
  ),
);

마치며

이렇게 Flutter의 shimmer 패키지를 이용하여 타이머 애니메이션에 shimmer 효과를 적용하는 방법을 알아보았습니다. shimmer 애니메이션을 활용하여 대기 중인 콘텐츠를 시각적으로 표현함으로써, 사용자들에게 더 나은 사용자 경험을 제공할 수 있습니다.

더 많은 설정 옵션 및 활용 방법은 shimmer 패키지 공식 문서를 참고하시기 바랍니다.