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

05 Dec 2023

flutter

Flutter는 Google에서 개발한 모바일 앱 개발 프레임워크로, 훌륭한 UI와 애니메이션을 구현할 수 있는 기능을 제공합니다. velocity_x는 Flutter의 UI 레이아웃을 구축하기 위한 편리한 패키지입니다. 이번 포스트에서는 velocity_x를 사용하여 화면 전환 애니메이션을 만드는 방법에 대해 알아보겠습니다.

1. velocity_x 패키지 설치하기

먼저, Flutter 프로젝트에 velocity_x 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^2.1.0

패키지를 추가한 후, 프로젝트 디렉토리에서 flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. 화면 전환 애니메이션 구현하기

velocity_x는 간편한 메서드 체이닝을 통해 다양한 애니메이션 효과를 적용할 수 있습니다. 화면 전환 애니메이션을 구현하기 위해 다음 단계를 따라주세요:

2.1. 필요한 패키지 가져오기

먼저, 필요한 패키지를 가져옵니다:

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

2.2. 애니메이션 효과 적용하기

다음으로, 애니메이션 효과를 적용할 화면 위젯을 만들어보겠습니다. 예를 들어, HomePage 위젯을 생성한 후 다음과 같이 애니메이션 효과를 적용해보세요:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return "Home Page".text.xl4.white.makeCentered().box
        .p16
        .rounded
        .shadowLg
        .color(Colors.blue)
        .make()
        .px16()
        .py12()
        .onTap(() {
      context.vxNav.push(
        MaterialPageRoute(
          builder: (context) => DetailPage(),
        ),
      );
    });
  }
}

위 코드의 HomePage 위젯은 “Home Page”라는 텍스트를 가진 버튼을 생성하고, 버튼을 클릭하면 DetailPage로 화면 전환을 수행합니다.

2.3. 다른 화면에서 되돌아오기

앞서 만든 DetailPage에서 다른 화면으로 되돌아오기 위해 Navigator.pop() 메서드를 사용합니다. 예를 들어, 다음과 같이 DetailPage에서 “Back” 버튼을 만들고 클릭하면 다시 HomePage으로 돌아갑니다:

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return "Detail Page"
        .text
        .xl4
        .white
        .makeCentered()
        .box
        .p16
        .rounded
        .shadowLg
        .color(Colors.green)
        .make()
        .px16()
        .py12()
        .onTap(() {
      Navigator.pop(context);
    });
  }
}

3. 애니메이션 실행하기

마지막으로, 위에서 구현한 화면 전환 애니메이션을 실행하기 위해 다음과 같이 main.dart 파일을 수정해주세요:

void main() {
  runApp(VxState(store: Store(), child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Velocity_X Transition',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/detail': (context) => DetailPage(),
      },
      navigatorObservers: [
        VxNavigatorObserver(),
      ],
    );
  }
}

설정된 라우트와 VxNavigatorObserver를 통해 애니메이션 효과가 적용된 화면 전환을 확인할 수 있습니다.

위의 단계를 따라하면 velocity_x를 사용하여 화면 전환 애니메이션을 쉽게 구현할 수 있습니다. velocity_x의 메서드 체이닝을 통해 더 다양한 애니메이션 효과를 적용해보세요!

더 많은 정보는 velocity_x 공식 문서를 참조하세요.