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

05 Dec 2023

flutter

Flutter는 Google에서 개발한 UI 프레임워크로, 강력한 기능과 다양한 애니메이션을 지원합니다. Velocity_X는 Flutter의 확장 라이브러리로, 더 간결하게 코드를 작성하고 강력한 UI를 만들 수 있습니다. 이번 블로그 포스트에서는 Velocity_X를 사용하여 메신저 애니메이션을 만들어보겠습니다.

Velocity_X 라이브러리 추가하기

먼저, 프로젝트에 Velocity_X 라이브러리를 추가해야 합니다. pubspec.yaml 파일을 열고, dependencies 섹션에 아래의 코드를 추가해주세요.

dependencies:
  velocity_x: ^2.0.1

변경 사항을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 다운로드하고 업데이트합니다.

메신저 애니메이션 만들기

이제 Velocity_X를 사용하여 메신저 애니메이션을 만들어보겠습니다. 먼저, import 'package:velocity_x/velocity_x.dart'; 문을 추가해 Velocity_X를 import합니다.

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

class MessengerAnimation extends StatefulWidget {
  @override
  _MessengerAnimationState createState() => _MessengerAnimationState();
}

class _MessengerAnimationState extends State<MessengerAnimation>
    with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      duration: Duration(milliseconds: 300),
      vsync: this,
    );

    _opacityAnimation = CurvedAnimation(
      parent: _animationController,
      curve: Curves.easeInOut,
    );

    WidgetsBinding.instance?.addPostFrameCallback((_) {
      _animationController.forward();
    });
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: "Messenger Animation".text.make(),
      ),
      body: Center(
        child: VStack(
          [
            FlutterLogo(size: 100),
            16.heightBox,
            "New Message".text.xl2.semiBold.make(),
            16.heightBox,
            "This is a new message".text.lg.make(),
            32.heightBox,
            MaterialButton(
              onPressed: () {
                _animationController.reverse();
              },
              child: "Animate".text.white.make(),
              color: Colors.blue,
            ).animatedBox.width(200).paddingAll(16),
          ],
        ).opacity(_opacityAnimation.value),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MessengerAnimation(),
  ));
}

이 코드에서는 MessengerAnimation 클래스를 StatefulWidget으로 정의하고, TickerProviderStateMixin을 mixin으로 사용합니다. 그리고 애니메이션을 제어할 AnimationController와 Animation 객체를 정의합니다.

initState() 메서드에서는 _animationController와 _opacityAnimation을 초기화하고, addPostFrameCallback을 사용하여 화면이 로드된 후에 애니메이션이 실행되도록 설정합니다.

build() 메서드에서는 Velocity_X의 VStack 위젯을 사용하여 화면을 구성합니다. VStack 안에는 FlutterLogo, “New Message”와 “This is a new message”라는 텍스트 위젯이 있습니다. 그리고 “Animate” 버튼이 있으며, 버튼을 누르면 _animationController.reverse() 메서드를 호출하여 애니메이션을 역방향으로 실행합니다.

마지막으로 runApp()으로 앱을 실행하고, MessengerAnimation 위젯을 화면에 표시합니다.

실행 결과 확인하기

앱을 실행하면 AppBar와 애니메이션 동작을 확인할 수 있는 화면이 표시됩니다. “New Message”와 “This is a new message” 텍스트 위젯이 부드럽게 나타나고, “Animate” 버튼을 누르면 애니메이션이 역방향으로 실행됩니다.

마무리

이번에는 Flutter에서 Velocity_X를 사용하여 메신저 애니메이션을 만드는 방법에 대해 알아보았습니다. Velocity_X는 강력한 기능을 가진 Flutter 확장 라이브러리로, 손쉽게 UI를 개발할 수 있습니다. Velocity_X에는 훨씬 더 다양한 기능이 있으니, 관심있는 분들은 공식 문서를 참고해보시기 바랍니다.

Flutter와 Velocity_X를 사용하여 멋진 애니메이션을 만들어보세요!