How to change navigation animation using Flutter

nlern picture nlern · May 6, 2018 · Viewed 52.7k times · Source

Is there any way to change the default animation when navigating to/from a page in Flutter?

Answer

Shyju M picture Shyju M · May 7, 2018

You can subclass MaterialPageRouteand override buildTransitions.

Eg:

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    // Fades between routes. (If you don't want any animation,
    // just return child.)
    return new FadeTransition(opacity: animation, child: child);
  }
}

to use :

new RaisedButton(
                child: new Text('Goto'),
                onPressed: (){
                  Navigator.push(
                    context,
                    new MyCustomRoute(builder: (context) => new SecondPage()),
                  );
                }),

Replace fade transition with your animation