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

05 Dec 2023

flutter

velocity_x는 Flutter에서 사용할 수 있는 강력한 UI 라이브러리로써, 다양한 애니메이션 기능을 제공합니다. 이번 블로그 포스트에서는 velocity_x를 사용하여 체크박스 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. velocity_x 설치하기

먼저, flutter 프로젝트에 velocity_x 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^2.0.0

의존성 추가 후에는 flutter pub get 명령어를 사용하여 패키지를 다운로드 받아주세요.

2. 체크박스 위젯 만들기

체크박스 위젯에 애니메이션을 적용하기 위해, VxCheckbox 위젯을 사용할 것입니다. 다음은 기본적인 체크박스 위젯을 생성하는 코드입니다.

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

class AnimatedCheckbox extends StatefulWidget {
  @override
  _AnimatedCheckboxState createState() => _AnimatedCheckboxState();
}

class _AnimatedCheckboxState extends State<AnimatedCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return VxCheckbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value;
        });
      },
    );
  }
}

애니메이션을 추가하기 위해 VxCheckbox 위젯을 사용하였고, value와 onChanged 속성을 설정하였습니다. value는 체크박스의 상태(체크됨/체크되지 않음)를 나타내는 불리언 값으로서, isChecked 변수로 관리되고 있습니다. onChanged는 체크박스의 상태 변화를 감지하고 isChecked 변수를 업데이트하도록 설정한 콜백 함수입니다.

3. 애니메이션 추가하기

체크박스에 애니메이션을 추가하기 위해 velocity_x 라이브러리에서 제공하는 애니메이션 기능을 사용할 것입니다. 다음은 체크박스가 체크되었을 때 애니메이션이 발생하는 코드입니다.

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

class AnimatedCheckbox extends StatefulWidget {
  @override
  _AnimatedCheckboxState createState() => _AnimatedCheckboxState();
}

class _AnimatedCheckboxState extends State<AnimatedCheckbox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return VxCheckbox(
      value: isChecked,
      onChanged: (value) {
        setState(() {
          isChecked = value;
        });

        if (isChecked) {
          context.vxObjects.anim(
            VxTicker().physics(PhysicsType.bounce).animate(Duration(milliseconds: 300)),
            Curves.ease,
            () => print('Checkbox Animated!'),
          );
        }
      },
    );
  }
}

체크박스가 체크되었을 때, isChecked 변수가 true로 업데이트된 후에 애니메이션 코드를 실행합니다. vxObjects로 애니메이션 객체를 생성한 후, VxTicker().physics(PhysicsType.bounce).animate(Duration(milliseconds: 300))를 통해 바운스 효과를 가진 애니메이션을 설정하였습니다. 이 애니메이션은 300밀리초 동안 실행됩니다. Curves.ease는 애니메이션의 이징 효과를 지정하는데 사용되었습니다. 마지막으로 애니메이션이 완료된 후에 호출될 콜백 함수를 설정하기 위해 () => print('Checkbox Animated!')를 사용하였습니다.

이제 AnimatedCheckbox 위젯을 사용하여 체크박스 애니메이션을 구현할 준비가 모두 되었습니다!

마무리

이번 블로그 포스트에서는 velocity_x를 사용하여 체크박스 애니메이션을 만드는 방법에 대해 알아보았습니다. velocity_x를 활용하면 Flutter 애플리케이션에 다양한 애니메이션을 손쉽게 추가할 수 있습니다. 향후 더 많은 애니메이션 효과를 구현하기 위해 velocity_x 라이브러리에 대한 자세한 문서를 참고하기를 권장합니다.

참고: velocity_x 라이브러리