How to change navigation animation using Flutter

by

You can use PageRouteBuilder.

The following example shows FadeTransition when you navigate to second screen.

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (_, __, ___) => Page2(),
    transitionDuration: Duration(seconds: 2),
    transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
  ),
);

If you’re using go_router:

GoRoute(
  path: '/page2',
  pageBuilder: (_, state) {
    return CustomTransitionPage(
      key: state.pageKey,
      child: Page2(),
      transitionDuration: Duration(seconds: 2),
      transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c),
    );
  },
)

and then:

context.go('/page2');

Leave a Comment