Add custom page transitions with GoRouter

Page transitions are a key part of making your app feel smooth and easy to use. They guide the user between screens and make navigation feel natural.

Why Page Transitions Matter

Smooth animations when moving from one page to another can really improve how people feel about your app. It makes the app feel more polished and professional.

Create Your Own Transition Helper

You can define a simple function that builds a custom transition for you. This uses CustomTransitionPage and a transition like FadeThroughTransition (or any other you prefer).

Example Transition Helper

Here's how a simple helper function might look to define a custom page transition:

Page<dynamic> buildPageTransition(
  BuildContext context, 
  GoRouterState state,
  Widget child,
) => CustomTransitionPage<dynamic>(
  key: state.pageKey,
  child: child,
  transitionsBuilder: (context, animation, secondaryAnimation, child) =>
    FadeThroughTransition(
      animation: animation,
      secondaryAnimation: secondaryAnimation,
      child: child,
    ),
);

You can build your own animations or use ones available from packages on pub.dev.

Using the Transition in Your Route

Once you have your helper function, you use it within your GoRouter route definition. Instead of just providing the builder for the page, you use pageBuilder and call your transition helper function.

Example Route Definition

Here's how you use the pageBuilder with your custom transition helper:

GoRoute(
  path: '/signin',
  builder: (context, state) => const SignInPage(),
  pageBuilder: (context, state) => buildPageTransition(context, state, const SignInPage()),
),

Customize Default Transitions

You can also set default page transitions for your whole app directly in your theme settings. This allows you to apply specific transitions based on the platform (like Android or iOS).

Example Theme Customization

pageTransitionsTheme: PageTransitionsTheme(
  builders: {
    TargetPlatform.android: const ZoomPageTransitionsBuilder(),
    TargetPlatform.iOS: const CupertinoPageTransitionsBuilder(),
  },
),