Transition animations topic

GoRouter allows you to customize the transition animation for each GoRoute. To configure a custom transition animation, provide a pageBuilder parameter to the GoRoute constructor:

  path: 'details',
  pageBuilder: (context, state) {
    return CustomTransitionPage(
      key: state.pageKey,
      child: DetailsScreen(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // Change the opacity of the screen using a Curve based on the the animation's
        // value
        return FadeTransition(
              CurveTween(curve: Curves.easeInOutCirc).animate(animation),
          child: child,

For a complete example, see the transition animations sample.

For more information on animations in Flutter, visit the Animations page on


GoRoute Get started Configuration Redirection Transition animations Named routes
A route that is displayed visually above the matching parent route using the Navigator.