[flutter] velocity_x를 사용하여 어떻게 버튼 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

Velocity_X는 Flutter의 플러그인으로, 간단하고 직관적인 방식으로 애니메이션을 만들 수 있게 도와줍니다. 이 플러그인을 사용하여 버튼에 애니메이션을 추가하는 방법을 알아보겠습니다.

Velocity_X 설치하기

먼저 pubspec.yaml 파일에 velocity_x를 의존성으로 추가해야 합니다. 다음과 같이 작성하고 패키지를 가져옵니다.

dependencies:
  flutter:
    sdk: flutter
  
  velocity_x: ^1.2.0

$ flutter pub get

버튼에 애니메이션 추가하기

먼저 VelocityX 위젯을 사용하여 애니메이션을 적용할 버튼을 만듭니다.

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

class AnimatedButton extends StatefulWidget {
  @override
  _AnimatedButtonState createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton> {
  @override
  Widget build(BuildContext context) {
    return VelocityXButton(
      child: Text('버튼'),
      onPressed: () {
        // 버튼 클릭 시 실행할 코드 작성
      },
    );
  }
}

버튼의 애니메이션을 정의하기 위해 animate() 메소드를 사용합니다. 이 메소드에는 사용할 애니메이션 속성을 설정합니다. 아래 예제에서는 fadeIn 및 pulse 애니메이션을 사용하겠습니다.

class _AnimatedButtonState extends State<AnimatedButton> {
  @override
  Widget build(BuildContext context) {
    return VelocityXButton(
      child: Text('버튼'),
      onPressed: () {
        // 버튼 클릭 시 실행할 코드 작성
      },
    ).animate(
      velocity: 0.5,
      duration: Duration(milliseconds: 500),
      fadeIn: 1.0,
      pulse: 1.0,
    );
  }
}

이제 버튼을 누를 때마다 애니메이션이 트리거됩니다. 애니메이션이 일어나는 속도와 지속 시간은 velocity 및 duration을 사용하여 조정할 수 있습니다. fadeIn 및 pulse 속성을 사용하여 페이드 인 및 펄스 애니메이션의 강도를 설정할 수도 있습니다.

마무리

Velocity_X를 사용하여 Flutter 버튼에 애니메이션을 추가하는 방법을 알아보았습니다. 이제 애플리케이션에 자유롭게 적용할 수 있습니다. Velocity_X에는 다양한 애니메이션 및 속성이 있으므로, 필요에 따라 문서를 확인해 보세요. 참고 문서는 다음과 같습니다.

Velocity_X GitHub 페이지