Page Transitions

Add smooth animations between pages with built-in transitions. GoRouter Modular provides a set of ready-to-use transitions with support for inheritance, composition, and platform defaults.

Quick Start

Apply a transition to a module — all child routes inherit it automatically:

ModuleRoute(
  '/home',
  module: HomeModule(),
  transition: GoTransitions.fadeUpwards,
  duration: Duration(milliseconds: 300),
)

Override for a specific child route:

ChildRoute(
  '/details',
  child: (_, __) => DetailsPage(),
  transition: GoTransitions.slide.toRight.withFade,
)

Available Transitions

Basic

Transition	Description
`GoTransitions.fade`	Simple opacity fade
`GoTransitions.fadeUpwards`	Fade with upward slide (Material default)
`GoTransitions.slide.toRight`	Horizontal slide from left
`GoTransitions.slide.toLeft`	Horizontal slide from right
`GoTransitions.scale`	Scale from center
`GoTransitions.rotate`	Rotation entrance

Platform

Transition	Description
`GoTransitions.cupertino`	iOS/macOS native style
`GoTransitions.material`	Android native style

Combined

Chain modifiers to compose effects:

GoTransitions.slide.toRight.withFade
GoTransitions.scale.withRotation
GoTransitions.rotate.withScale.withFade

Transition Inheritance

Child routes automatically inherit transitions from their parent module. This keeps your code DRY:

// All routes in HomeModule use fadeUpwards
ModuleRoute('/home', module: HomeModule(),
  transition: GoTransitions.fadeUpwards)

class HomeModule extends Module {
  @override
  List<ModularRoute> get routes => [
    // Inherits fadeUpwards from parent
    ChildRoute('/', child: (_, __) => HomePage()),
 
    // Overrides with its own transition
    ChildRoute('/profile', child: (_, __) => ProfilePage(),
      transition: GoTransitions.slide.toRight),
  ];
}

Global Defaults

Set default transition duration and platform-specific transitions for the entire app:

class AppWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    GoTransition.defaultDuration = Duration(milliseconds: 400);
 
    return MaterialApp.router(
      routerConfig: Modular.routerConfig,
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: {
            TargetPlatform.android: GoTransitions.fadeUpwards,
            TargetPlatform.iOS: GoTransitions.cupertino,
          },
        ),
      ),
    );
  }
}

Migration from PageTransition

If you were using the old PageTransition enum, update to GoTransitions:

// Before
ChildRoute('/', child: (_, __) => HomePage(), transition: PageTransition.fade)
 
// After
ChildRoute('/', child: (_, __) => HomePage(), transition: GoTransitions.fade)

Best Practices

Set transitions at the module level — Children inherit automatically.
Use lightweight transitions for frequent routes — fade or fadeUpwards with short durations (200-300ms).
Reserve complex transitions for emphasis — Scale + rotation for special pages only.
Match platform conventions — Use cupertino on iOS and material/fadeUpwards on Android.
Keep durations consistent — Set GoTransition.defaultDuration once in your app.

See Examples for complete code samples.

Navigation Examples