[flutter] 플러터(Flutter)로 페이지 전환 애니메이션 구현하기

18 Dec 2023

flutter

플러터(Flutter)로 모바일 앱을 개발할 때 페이지 전환 애니메이션은 앱의 사용자 경험을 향상시키는 중요한 부분입니다. 이번 포스트에서는 플러터(Flutter)에서 페이지 전환 애니메이션을 구현하는 방법을 알아보겠습니다.

페이지 전환 애니메이션 구현

플러터(Flutter)에서 페이지 전환 애니메이션을 구현하기 위해서는 PageRouteBuilder나 PageRoute 클래스를 사용합니다.

예제

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  ),
);

위의 예제는 PageRouteBuilder를 사용하여 페이지 전환 애니메이션을 구현한 것입니다.

마무리

이렇게 플러터(Flutter)로 페이지 전환 애니메이션을 구현할 수 있습니다. 페이지 전환 애니메이션을 구현함으로써 앱의 UI/UX를 더욱 효과적으로 개선할 수 있습니다.

만약 이 포스트에 대한 추가 정보가 필요하다면, Flutter 공식 문서를 참고해 보세요.

다음 포스트에서 더 많은 플러터(Flutter) 개발 관련 팁을 공유하겠습니다. 함께해 주셔서 감사합니다!