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

05 Dec 2023

flutter

앱 개발 중 팝업 창을 생성하고 애니메이션을 추가하는 것은 사용자 경험을 향상시키는 좋은 방법입니다. 여기에서는 Flutter 프레임워크에서 velocity_x 패키지를 사용하여 간단한 팝업 애니메이션을 만드는 방법을 안내하겠습니다.

1. velocity_x 패키지 추가하기

먼저, pubspec.yaml 파일에 velocity_x 패키지를 추가합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
    
  velocity_x: ^1.3.0

저장한 후, flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

2. 팝업 애니메이션 생성하기

팝업 애니메이션을 적용하기 위해 velocity_x 패키지의 VxPopup 위젯을 사용합니다. 아래의 코드를 참고하여 팝업을 생성하고 애니메이션을 추가할 수 있습니다.

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

class PopupScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VxPopup(
      child: Container(
        padding: EdgeInsets.all(16),
        child: Text(
          '팝업 내용',
          style: TextStyle(fontSize: 20),
        ),
      ),
      backgroundColor: Colors.white,
      borderRadius: BorderRadius.circular(10),
      alignment: Alignment.center,
      showCloseButton: true,
      closePopupOnTapOutside: true,
      enterDuration: Duration(milliseconds: 300),
      exitDuration: Duration(milliseconds: 200),
      underlayWidget: Container(
        color: Colors.black54,
      ),
    );
  }
}

위 코드에서 VxPopup 위젯의 속성을 설정하여 팝업의 모양과 동작을 조정할 수 있습니다. 몇 가지 중요한 속성은 다음과 같습니다:

child: 팝업에 표시될 위젯을 지정합니다.
backgroundColor: 팝업의 배경 색상을 설정합니다.
borderRadius: 팝업의 테두리 반경을 설정합니다.
alignment: 팝업의 정렬을 설정합니다.
showCloseButton: 닫기 버튼의 표시 여부를 설정합니다.
closePopupOnTapOutside: 바깥쪽을 터치할 경우 팝업을 닫을지 여부를 설정합니다.
enterDuration: 팝업이 등장하는 애니메이션의 지속 시간을 설정합니다.
exitDuration: 팝업이 사라지는 애니메이션의 지속 시간을 설정합니다.
underlayWidget: 팝업이 나타날 때 배경에 표시될 위젯을 설정합니다.

3. 팝업 애니메이션 호출하기

위에서 만든 팝업 애니메이션을 호출하기 위해 다음 코드를 참고하세요.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return PopupScreen();
  },
);

showDialog 함수를 사용하여 팝업을 호출하고, builder 함수에서 앞서 생성한 PopupScreen 위젯을 반환합니다.

이제 앱에서 팝업 애니메이션을 사용할 수 있습니다. velocity_x 패키지를 사용하면 간단하게 다양한 애니메이션 효과를 추가할 수 있습니다. velocity_x 패키지의 공식 문서에서 더 많은 사용법과 속성을 확인할 수 있습니다.

1. velocity_x 패키지 추가하기

2. 팝업 애니메이션 생성하기

3. 팝업 애니메이션 호출하기

참고 자료