PageRouteBuilder

 PageRouteBuilder(
          transitionDuration: const Duration(seconds: 1),
          reverseTransitionDuration: const Duration(seconds: 1),
          pageBuilder: (context, animation, secondaryAnimation) =>
              const UsernameScreen(),
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            final offsetAnimation = Tween(
              begin: const Offset(1, 0),
              end: Offset.zero,
            ).animate(animation);
            final opacityAnimation = Tween(
              begin: 0.5,
              end: 1.0,
            ).animate(animation);
            return SlideTransition(
              position: offsetAnimation,
              child: FadeTransition(
                opacity: opacityAnimation,
                child: child,
              ),
            );
          }),

이 코드는 PageRouteBuilder를 사용하여 사용자 정의 페이지 전환을 구현하는 방법을 보여줍니다. PageRouteBuilder는 Flutter에서 페이지 전환을 세밀하게 제어할 수 있는 라우팅 메커니즘을 제공합니다. 이를 통해 개발자는 표준 페이지 전환 외에도 다양한 애니메이션과 효과를 페이지 전환에 적용할 수 있습니다.

주요 속성과 메서드:

• transitionDuration: 페이지 전환 애니메이션이 실행되는 시간을 정의합니다. 이 예제에서는 Duration(seconds: 1)로 설정하여, 전환 애니메이션의 지속 시간이 1초가 되도록 합니다.

• reverseTransitionDuration: 페이지가 사라질 때의 전환 애니메이션 시간을 정의합니다. 여기서도 마찬가지로 1초로 설정합니다.

• pageBuilder: 새 페이지를 생성하는 데 사용됩니다. context, animation, secondaryAnimation 세 가지 매개변수를 받으며, 여기서는 UsernameScreen을 생성하여 반환합니다.

• transitionsBuilder: 페이지 전환에 사용할 애니메이션을 구축하는 함수입니다. 이 함수는 context, animation, secondaryAnimation, child를 매개변수로 받습니다. child는 pageBuilder에서 반환된 위젯을 나타냅니다.

애니메이션 구현:

• offsetAnimation: Tween<Offset>을 사용하여 시작점(begin: const Offset(1, 0))에서 종료점(end: Offset.zero)까지의 슬라이드 애니메이션을 정의합니다. 이는 페이지가 오른쪽에서 왼쪽으로 슬라이드하면서 등장하는 효과를 만듭니다.

• opacityAnimation: Tween<double>을 사용하여 투명도가 0.5에서 1.0으로 변경되는 페이드인(fade-in) 애니메이션을 정의합니다. 이는 페이지가 점점 더 선명하게 나타나는 효과를 만듭니다.

• SlideTransition과 FadeTransition: 위에서 정의한 offsetAnimation과 opacityAnimation을 각각 SlideTransition과 FadeTransition에 적용합니다. 이 두 애니메이션은 중첩되어 동시에 실행되며, child 위젯에 적용됩니다.

결론:

PageRouteBuilder와 함께 사용자 정의 애니메이션을 구현함으로써, Flutter 앱의 페이지 전환을 보다 독특하고 매력적으로 만들 수 있습니다. 슬라이드와 페이드인 애니메이션의 조합은 사용자 경험을 풍부하게 하며, 앱의 시각적 매력을 높입니다. 이러한 접근 방식은 앱의 브랜딩과 사용자 인터페이스 디자인을 강화하는 데 유용하게 사용될 수 있습니다.