[flutter] 애니메이션을 사용하여 부드러운 페이지 전환 효과 구현하기

11 Dec 2023

flutter

Flutter는 애니메이션을 사용하여 부드러운 페이지 전환 효과를 구현할 수 있는 강력한 기능을 제공합니다. 이 기능을 사용하면 앱의 사용자 경험을 향상시키고 전환효과에 동적인 요소를 추가하여 앱을 더욱 흥미롭게 만들 수 있습니다.

이제 Flutter를 사용하여 페이지 전환 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

애니메이션을 사용한 페이지 전환 구현하기

우선, 애니메이션을 사용하여 페이지 전환 효과를 구현하기 위해서는 PageRouteBuilder를 사용합니다. 다음은 PageRouteBuilder를 사용하여 페이지 전환 애니메이션을 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

class CustomPageRoute extends PageRouteBuilder {
  final Widget widget;

  CustomPageRoute({this.widget})
      : super(
          transitionDuration: Duration(milliseconds: 500),
          transitionsBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secAnimation, Widget child) {
            animation = CurvedAnimation(
              parent: animation,
              curve: Curves.easeInOut,
            );
            return ScaleTransition(
              alignment: Alignment.center,
              scale: animation,
              child: child,
            );
          },
          pageBuilder: (BuildContext context, Animation<double> animation,
              Animation<double> secAnimation) {
            return widget;
          },
        );
}

위 코드에서 CustomPageRoute 클래스는 PageRouteBuilder를 상속받아 사용자 정의 페이지 전환 애니메이션을 구현합니다.

Flutter에서 페이지 전환 애니메이션을 사용하는 방법

사용자 정의 페이지 전환 애니메이션을 활용하여 페이지를 전환할 때는 다음과 같이 Navigator를 사용하여 페이지를 전환하면 됩니다.

Navigator.push(
  context,
  CustomPageRoute(widget: SecondPage()),
);

위 코드에서 CustomPageRoute 클래스를 사용하여 페이지를 전환하면 페이지가 확대되는 애니메이션 효과를 볼 수 있습니다.

마무리

이제 Flutter를 사용하여 애니메이션을 활용하여 부드러운 페이지 전환 효과를 구현하는 방법에 대해 살펴보았습니다. 이를 통해 사용자 경험을 향상시키고 동적인 애니메이션 효과를 추가하여 앱을 더욱 흥미롭게 만들 수 있습니다.

더 많은 정보를 원한다면 Flutter 공식 문서를 참고하세요.