[Flutter] 페이지 전환 애니메이션을 커스터마이징하기

 

플러터에서 공식적으로 제공하는 인터페이스를 활용하여 페이지 전환 애니메이션을 커스터마이징하는 방법은 크게 두 가지로 나눌 수 있습니다.

 

PageTransitionsBuilder

첫 번째 방법은 PageTransitionsBuilder를 이용하는 것으로, 이를 ThemeData.pageTransitionsTheme에 적용하여 앱 전반의 페이지 전환 애니메이션을 일괄적으로 변경할 수 있습니다.

이 방식은 MaterialPageRoute 등과 같은 기본적인 PageRoute에서 PageTransitionsBuilder를 참조하여 전환 애니메이션을 적용하는 구조를 활용하는 것입니다. 다만, MaterialPageRoute가 아닌 별도의 PageRoute를 사용하는 경우에는 PageTransitionsBuilder를 적용할 필요가 없으며, 이럴 경우 해당 빌더를 굳이 사용할 이유가 없기 때문에 추천하지 않습니다.

다음은 PageTransitionsBuilder를 활용하여 커스텀 전환 애니메이션을 적용하는 예제입니다.

bash
class CustomPageTransitionsBuilder extends PageTransitionsBuilder {
  @override
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child
  ) {
    final isExiting = animation.status == AnimationStatus.reverse;
    final animValue = isExiting
      ? Curves.easeInQuart.transformInternal(animation.value)
      : Curves.easeOutQuart.transformInternal(animation.value);

    return Opacity(opacity: animValue, child: child);
  }

  @override
  DelegatedTransitionBuilder? get delegatedTransition => ...;
}

이렇게 정의한 CustomPageTransitionsBuilder를 ThemeData.pageTransitionsTheme에 적용하면 앱 전반에서 해당 애니메이션이 적용됩니다.

bash
return MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: { // 플랫폼 별로 적용 가능
        TargetPlatform.android: CustomPageTransitionsBuilder(),
        TargetPlatform.windows: CustomPageTransitionsBuilder(),
      }
    )
  ),
  home: ...
);

 

PageRoute

두 번째 방법은 PageRoute 클래스를 직접 상속하여 새로운 PageRoute 서브클래스를 만드는 방식입니다, 해당 방법을 사용하면 buildTransitions 메서드를 직접 오버라이드하여 페이지 전환 애니메이션을 각 페이지마다 전환 효과를 다르게 적용하는 것도 충분히 가능합니다.

다음은 PageRoute를 상속하는 서브클래스의 간단한 구현 예제입니다.

bash
class CustomPageRoute extends PageRoute {
  // ... 생성자 부분 생략

  @override
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child
  ) {
    final isExiting = animation.status == AnimationStatus.reverse;
    final animValue = isExiting
      ? Curves.easeInQuart.transformInternal(animation.value)
      : Curves.easeOutQuart.transformInternal(animation.value);

    return Opacity(opacity: animValue, child: child);
  }

  @override
  DelegatedTransitionBuilder? get delegatedTransition => (
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    bool allowSnapshotting,
    Widget? child,
  ) {
    return ...
  };
  
  // ... 이하 생략
}

이 방식은 특정 페이지에 대해서만 커스텀 전환 애니메이션을 적용할 수 있으며, Navigator.push를 사용할 때 CustomPageRoute를 직접 전달하여 활용합니다.

 

따라서 해당 방식은 전역적인 테마 변경 없이 특정 PageRoute에 한정하여 전환 애니메이션을 조정할 수 있다는 점에서 유연성이 더 높습니다. (또한 저는 개인적으로 커스텀할 때 해당 방식이 더 편합니다.)

bash
Navigator.push(context, CustomPageRoute(...));

 

방법	적용 범위	장점	단점
PageTransitionsBuilder	MaterialPageRoute를 사용할 때 전역 적용	한 번의 설정으로 앱 전반에 일괄 적용 가능	MaterialPageRoute를 사용하지 않는 경우 불필요
PageRoute	특정 PageRoute에 한정하여 적용 가능	특정 페이지에만 원하는 애니메이션 적용 가능	매번 직접 CustomPageRoute를 사용해야 함

 

참고사항

보시면 알려드린 두 방식들 모두 delegatedTransition getter를 선언하여 Widget을 반환할 수 있습니다. 이 getter는 현재 페이지가 아닌, 새로운 페이지가 push될 때 fade-out 효과가 적용되는 기존 페이지의 위젯을 반환하는 역할을 합니다.

 

 

이 두 가지 방법과 정보를 적절히 활용하면, 앱의 전환 효과를 원하는 스타일로 커스터마이징할 수 있습니다. 마지막으로 해당 글을 읽어주셔서 감사합니다.