[flutter] velocity_x를 사용하여 어떻게 유동적인 UI 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

Flutter는 사용하기 쉬운 UI 프레임워크로 유동적인 애니메이션을 만들기에 적합합니다. velocity_x 패키지는 Flutter 애니메이션을 더욱 쉽게 작성할 수 있도록 도와줍니다. 이 패키지는 몇 가지 기본적인 움직임 함수와 유용한 헬퍼 함수를 제공합니다.

이 블로그 포스트에서는 velocity_x를 사용하여 Flutter에서 유동적인 UI 애니메이션을 만드는 방법을 알아보겠습니다.

1. velocity_x 패키지 설치하기

먼저, 프로젝트의 pubspec.yaml 파일에 velocity_x 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^2.0.0

그리고 터미널에서 flutter packages get 명령어를 실행하여 패키지를 가져옵니다.

2. 애니메이션 만들기

velocity_x 패키지를 사용하여 유동적인 UI 애니메이션을 만들려면 다음과 같은 단계를 따릅니다.

2.1 VelocityX 관련 클래스 import하기

애니메이션을 구현하기 위해 VelocityX 패키지의 관련 클래스를 import해야 합니다. 아래 코드를 상단에 추가합니다.

import 'package:velocity_x/velocity_x.dart';

2.2 UI를 유동적으로 애니메이션하기

velocity_x는 다양한 유형의 애니메이션을 구현할 수 있습니다. 예를 들어, 위젯을 이동시키거나 크기를 조절하는 애니메이션을 구현할 수 있습니다.

위젯 이동하기

아래 코드는 GestureDetector를 사용하여 드래그 제스처에 따라 위젯을 이동시키는 애니메이션을 구현한 예시입니다.

class DraggableBox extends StatefulWidget {
  @override
  _DraggableBoxState createState() => _DraggableBoxState();
}

class _DraggableBoxState extends State<DraggableBox> {
  double _xOffset = 0.0;
  double _yOffset = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          _xOffset += details.delta.dx;
          _yOffset += details.delta.dy;
        });
      },
      child: VStack([
        'Drag me!'.text.xl2.make(),
      ]).py20().px16().backgroundColor(Colors.blue).translate(x: _xOffset, y: _yOffset),
    );
  }
}

위젯 크기 조절하기

아래 코드는 GestureDetector를 사용하여 pinch 제스처에 따라 위젯의 크기를 조절하는 애니메이션을 구현한 예시입니다.

class ResizableBox extends StatefulWidget {
  @override
  _ResizableBoxState createState() => _ResizableBoxState();
}

class _ResizableBoxState extends State<ResizableBox> {
  double _scale = 1.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleUpdate: (details) {
        setState(() {
          _scale = details.scale;
        });
      },
      child: VStack([
        'Pinch me!'.text.xl2.make(),
      ]).p20().backgroundColor(Colors.orange).scale(_scale),
    );
  }
}

위 코드에서 onPanUpdate와 onScaleUpdate 콜백 함수에서 setState 메서드를 호출하여 애니메이션을 업데이트합니다. 그로 인해 위젯이 유동적으로 움직이거나 크기가 변하는 것을 확인할 수 있습니다.

결론

velocity_x 패키지를 사용하여 Flutter에서 유동적인 UI 애니메이션을 만들 수 있습니다. 위의 예시를 기반으로 개발자는 더욱 복잡한 애니메이션을 만들 수 있을 것입니다. velocity_x 패키지에 대한 자세한 내용은 공식 문서를 참조하세요.