🛣️ Routes / Modules
✨ Page Transitions
Overview

Page Transitions

Beautiful page transitions made simple. Add smooth animations between pages with just a few lines of code.

What You Get

  • Built-in transitions: fade, slide, scale, rotate, and more
  • Smart inheritance: child routes inherit from parent modules
  • Easy customization: duration and curves
  • Platform defaults: automatic fallbacks

Quick Start

1. Module Transitions

Set a transition for all routes in a module:

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

2. Child Route Transitions

Override for specific routes:

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

Available Transitions

// Basic transitions
GoTransitions.fade
GoTransitions.fadeUpwards
GoTransitions.slide.toRight
GoTransitions.scale
GoTransitions.rotate
 
// Platform styles
GoTransitions.cupertino  // iOS/macOS
GoTransitions.material   // Android
 
// Combined effects
GoTransitions.slide.toRight.withFade
GoTransitions.scale.withRotation

How Inheritance Works

Child routes automatically inherit transitions from their parent module:

// Parent sets transition
ModuleRoute('/home', module: HomeModule(), 
  transition: GoTransitions.fadeUpwards)
 
// Child inherits it
ChildRoute('/', child: (_, __) => HomePage())
 
// Child can override
ChildRoute('/profile', child: (_, __) => ProfilePage(),
  transition: GoTransitions.slide.toRight)

Global Setup

Set defaults for your 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

// Old way
ChildRoute('/', child: (_, __) => HomePage(), transition: PageTransition.fade)
 
// New way  
ChildRoute('/', child: (_, __) => HomePage(), transition: GoTransitions.fade)

Need more examples? Check out the Examples page.

🛣️ Routes SystemExamples