플러터(Flutter) 앱에서 버튼에 shimmer 애니메이션을 추가하여 사용자 경험을 향상시킬 수 있습니다. 이번 포스트에서는 플러터 프레임워크의 shimmer 패키지를 활용하여 버튼에 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

1. shimmer 패키지 추가

우선 pubspec.yaml 파일에 shimmer 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

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

flutter pub get

2. shimmer 애니메이션 적용

버튼에 shimmer 애니메이션을 적용하려면 Shimmer.fromColors 위젯을 사용합니다. 아래는 간단한 버튼에 shimmer 애니메이션을 적용하는 예시 코드입니다.

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

class ShimmerButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: RaisedButton(
        onPressed: () {
          // 버튼 클릭 시 동작 정의
        },
        child: Text('Shimmer Button'),
      ),
    );
  }
}

위 코드에서 Shimmer.fromColors 위젯을 이용하여 버튼을 감싸고, baseColor와 highlightColor를 지정하여 shimmer 애니메이션의 색상을 설정합니다.

결론

이제 플러터 프로젝트에서 shimmer 패키지를 이용하여 버튼에 애니메이션을 추가하는 방법을 알게 되었습니다. 이를 응용하여 다양한 UI 요소에 shimmer 효과를 적용하여 아름다운 애니메이션을 만들어보세요.