Transition Examples

Real-world examples to get you started quickly.

Basic Examples

Fade Transition

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

Slide Transition

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

Scale Transition

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('/ios', module: IOSModule(),
  transition: GoTransitions.cupertino)

Android Style

ModuleRoute('/android', module: AndroidModule(),
  transition: GoTransitions.fadeUpwards)

Inheritance Examples

Parent Module

ModuleRoute('/shop', module: ShopModule(),
  transition: GoTransitions.fadeUpwards)

Child Routes

// Inherits fadeUpwards
ChildRoute('/', child: (_, __) => ShopHomePage())
 
// Override with slide
ChildRoute('/cart', child: (_, __) => CartPage(),
  transition: GoTransitions.slide.toLeft)
 
// Override with scale
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

Lightweight for Frequent Routes

ChildRoute('/home', child: (_, __) => HomePage(),
  transition: GoTransitions.fade,
  duration: Duration(milliseconds: 200))

Special Occasions

ChildRoute('/celebration', child: (_, __) => CelebrationPage(),
  transition: GoTransitions.rotate.withScale.withFade,
  duration: Duration(milliseconds: 800))

Overview 🧭 Navigation