Routes & Modules
Page Transitions
Examples

Transition Examples

Complete code samples for common transition patterns.

Basic Transitions

Fade

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

Slide

ModuleRoute('/products', module: ProductsModule(),
  transition: GoTransitions.slide.toRight,
  duration: Duration(milliseconds: 400))

Scale with Fade

ModuleRoute('/profile', module: ProfileModule(),
  transition: GoTransitions.scale.withFade,
  duration: Duration(milliseconds: 500))

Combined Effects

Slide + Fade

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

Scale + Rotation

ChildRoute('/settings', child: (_, __) => SettingsPage(),
  transition: GoTransitions.scale.withRotation)

Platform-Specific

iOS Style

ModuleRoute('/settings', module: SettingsModule(),
  transition: GoTransitions.cupertino)

Android Style

ModuleRoute('/home', module: HomeModule(),
  transition: GoTransitions.fadeUpwards)

Inheritance in Practice

Set a transition on the parent module and override selectively in child routes:

// Parent module
ModuleRoute('/shop', module: ShopModule(),
  transition: GoTransitions.fadeUpwards)
class ShopModule extends Module {
  @override
  List<ModularRoute> get routes => [
    // Inherits fadeUpwards
    ChildRoute('/', child: (_, __) => ShopHomePage()),
 
    // Override: slide left for cart
    ChildRoute('/cart', child: (_, __) => CartPage(),
      transition: GoTransitions.slide.toLeft),
 
    // Override: scale for checkout
    ChildRoute('/checkout', child: (_, __) => CheckoutPage(),
      transition: GoTransitions.scale.withFade),
  ];
}

Complete App Example

class AppModule extends Module {
  @override
  List<ModularRoute> get routes => [
    ModuleRoute('/', module: HomeModule(),
      transition: GoTransitions.fadeUpwards),
 
    ModuleRoute('/products', module: ProductsModule(),
      transition: GoTransitions.slide.toRight.withFade),
 
    ModuleRoute('/profile', module: ProfileModule(),
      transition: GoTransitions.scale.withFade),
  ];
}

Performance Tips

  • Use fade or fadeUpwards (200-300ms) for frequently visited routes.
  • Reserve complex transitions (rotate.withScale.withFade) for special screens.
  • Set GoTransition.defaultDuration once in your app to keep durations consistent.
OverviewLoader System