[flutter] velocity_x를 사용하여 어떻게 프론트 디자인 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 다양한 애니메이션과 디자인을 구현할 수 있습니다. velocity_x는 Flutter에서 제공하는 애니메이션 관련 패키지 중 하나로, 간단한 코드로 프론트 디자인 애니메이션을 만들 수 있습니다. 이번 포스트에서는 velocity_x를 사용하여 어떻게 프론트 디자인 애니메이션을 만들 수 있는지 알아보겠습니다.

velocity_x 패키지 설치하기

먼저, pubspec.yaml 파일에 아래와 같이 velocity_x 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.0.0

그리고 패키지를 적용하기 위해 터미널에서 다음 명령어를 실행해주세요.

flutter pub get

이제 velocity_x 패키지를 사용할 준비가 되었습니다!

애니메이션 추가하기

velocity_x는 Flutter 위젯을 확장하여 애니메이션을 적용하는 간편한 방법을 제공합니다. 예를 들어, 버튼을 클릭하면 텍스트가 서서히 페이드인되는 애니메이션을 만들어보겠습니다.

먼저, 아래와 같이 애니메이션을 적용할 위젯을 생성합니다.

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

class FadeInAnimation extends StatefulWidget {
  @override
  _FadeInAnimationState createState() => _FadeInAnimationState();
}

class _FadeInAnimationState extends State<FadeInAnimation> {
  double opacity = 0;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        opacity = 1;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: opacity,
      child: "Hello, VelocityX!".text.xl4.make(),
    );
  }
}

위의 코드에서는 FadeInAnimation 클래스를 정의하고, 클릭한 후 2초 뒤에 Opacity 위젯의 값이 1로 변경되면서 텍스트가 서서히 페이드인됩니다.

이제 애니메이션을 사용할 화면에 FadeInAnimation 위젯을 추가하면 됩니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter VelocityX Animation"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => FadeInAnimation()),
            );
          },
          child: Text("Click Me"),
        ),
      ),
    );
  }
}

위의 코드에서는 버튼을 클릭하면 FadeInAnimation 페이지로 이동하게 됩니다.

실행하기

이제 앱을 실행하고 버튼을 클릭해보세요. 텍스트가 서서히 페이드인되는 애니메이션이 재생될 것입니다.

velocity_x는 텍스트뿐만 아니라 버튼, 이미지 등 다양한 위젯에 애니메이션을 적용할 수 있습니다. 사용법에 대해서는 velocity_x 패키지의 공식문서를 참고해주세요.

결론

Flutter에서 velocity_x를 사용하면 간단하게 프론트 디자인 애니메이션을 구현할 수 있습니다. 위의 예시는 애니메이션을 적용한 텍스트지만, 간단한 수정으로 원하는 위젯에 대한 애니메이션을 만들 수 있습니다. velocity_x를 사용하여 앱에 동적이고 매력적인 애니메이션을 추가해보세요!

참고 자료

velocity_x 패키지