[Flutter] Route 이동할 때 애니메이션 주기

[코드]

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class PageRouteWithAnimation {
  final Widget page;

  PageRouteWithAnimation(this.page);

  Route slideRitghtToLeft() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return page;
      },
      transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget 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,
        );
      },
    );
  }
  Route slideLeftToRight() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return page;
      },
      transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget 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,
        );
      },
    );
  }
}

 

기존 방법으로 사용하던 MaterialPageRoute 클래스를 사용하지 않고, PageRouteBuilder라는 클래스를 사용하는 것으로 변경한다. 해당 클래스에는 기존 페이지 변경을 위한 pageBuilder와 페이지가 변경될 때 사용하는 transitionsBuilder가 있으므로 이를 정의하여 사용하는 것이다.

 

이동할 루트 정보를 생성자로 받고, 이후에 원하는 애니메이션으로 화면을 전환한다.

나 같은 경우, 아래와 같이 사용한다.

onTap: () {
  PageRouteWithAnimation pageRouteWithAnimation = PageRouteWithAnimation(NoticeSetting());
  Navigator.push(context, pageRouteWithAnimation.slideRitghtToLeft());
},

NoticeSetting()으로 작성한 페이지를 이동할때, 오른쪽에서 왼쪽으로 이동하는 애니메이션으로 이동한다.

 

배운 사이트

https://medium.com/flutter-community/everything-you-need-to-know-about-flutter-page-route-transition-9ef5c1b32823

Everything you need to know about Flutter page route transition

** 데이터 전달

1. onGenerateRoute를 사용하는 방법

2. 전달하는 Widget page 생성자에 파라미터를 전달하는 방법

 

=> https://g-y-e-o-m.tistory.com/162

[Flutter] Route간 이동 및 데이터전달