Page Transitions

Page transitions in go_router_modular come from the go_transitions package, which is re-exported by go_router_modular. You don’t need an extra import — GoTransitions is available as soon as you import package:go_router_modular/go_router_modular.dart.

Three ways to apply a transition

1. Per route

Set transition (and optionally transitionDuration) directly on a ChildRoute:

ChildRoute(
  '/details',
  child: (context, state) => const DetailsPage(),
  transition: GoTransitions.fade,
  transitionDuration: const Duration(milliseconds: 300),
)

2. Global default

Set a default transition for every route in Modular.configure:

await Modular.configure(
  appModule: AppModule(),
  initialRoute: '/',
  defaultTransition: GoTransitions.fadeUpwards,
  defaultTransitionDuration: const Duration(milliseconds: 600),
);

Any route that doesn’t declare its own transition falls back to this default.

3. Stateful shell branches

To animate switching between branches of a stateful shell route, pass a container builder from StatefulShellBranchTransitions:

StatefulShellModularRoute(
  builder: (context, state, navigationShell) =>
      ScaffoldWithNavBar(navigationShell: navigationShell),
  navigatorContainerBuilder: StatefulShellBranchTransitions.withGoTransition(
    GoTransitions.scale.withRotation,
    transitionDuration: const Duration(milliseconds: 400),
  ),
  branches: [
    // ...
  ],
)

Inheritance

Routes inside a ModuleRoute inherit the parent’s transition unless they set their own. The resolution order for a given route is:

1. The route’s own transition / transitionDuration.
2. The transition inherited from its parent ModuleRoute.
3. The global default from Modular.configure.

Common transitions

These are the transitions used throughout the example app:

Next steps

• Transition examples
• Shell Routes
• Routes & Modules