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

05 Dec 2023

flutter

팝업 창은 사용자에게 메시지를 전달하거나 추가적인 정보를 표시하기 위해 자주 사용되는 UI 요소입니다. Flutter에서는 velocity_x 패키지를 사용하여 간편하게 팝업 창 애니메이션을 만들 수 있습니다. 이 가이드에서는 velocity_x를 사용하여 팝업 창이 등장하고 사라지는 애니메이션을 만드는 방법을 소개합니다.

velocity_x 패키지 설치하기

velocity_x 패키지는 Flutter의 dependency로 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 추가해주세요:

dependencies:
  velocity_x: ^1.2.0

그리고 flutter packages get 명령어를 실행하여 패키지를 설치해주세요.

팝업 창 애니메이션 만들기

먼저, 팝업 창을 구성하기 위한 위젯을 만들어야 합니다. 예를 들어, AlertDialog 위젯을 사용하여 팝업 창을 생성할 수 있습니다.

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

class PopupWindow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: '팝업 창 제목',
      content: '팝업 창 내용',
      actions: [
        FlatButton(
          child: '닫기',
          onPressed: () {
            context.pop();
          },
        ),
      ],
    );
  }
}

이제, PopupWindow 위젯을 화면에 등장하고 사라지도록 애니메이션을 적용해보겠습니다. velocity_x 패키지의 VelocityX 클래스를 활용하면 간단하게 애니메이션을 적용할 수 있습니다.

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

class AnimatedPopupWindow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VelocityX.animate(
      duration: Duration(milliseconds: 500),
      builder: (context, velocity, child) => Transform.scale(
        scale: velocity == 0.0 ? 0.0 : velocity * 2,
        child: PopupWindow(),
      ),
    );
  }
}

이제 AnimatedPopupWindow 위젯을 다른 화면에서 호출하면, 팝업 창의 등장과 사라짐을 동적으로 확인할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: '팝업 창 열기',
          onPressed: () {
            context.vxNav.push(
              widget: AnimatedPopupWindow(),
            );
          },
        ),
      ),
    );
  }
}

결론

Flutter에서는 velocity_x 패키지를 사용하여 팝업 창 애니메이션을 쉽게 만들 수 있습니다. AlertDialog을 이용하여 팝업 창을 구성하고, VelocityX를 활용하여 애니메이션을 적용하면 됩니다. 코드를 실행해보고 필요에 따라 애니메이션 속도나 스타일을 조정할 수 있습니다.