NavigationEasy20 XP2 min read
How do you set app-wide custom page transitions?
TL;DR: Set theme.pageTransitionsTheme in MaterialApp's ThemeData to apply custom transitions for all routes on specific platforms without modifying individual routes.
Full Answer
Instead of wrapping every push in a custom PageRoute, define app-wide transitions in ThemeData.pageTransitionsTheme.
🎯
Flutter ships with CupertinoPageTransitionsBuilder (iOS swipe), ZoomPageTransitionsBuilder (Android 10+ zoom), FadeUpwardsPageTransitionsBuilder (Android < 10), and OpenUpwardsPageTransitionsBuilder.
Code Examples
dartApp-wide fade transition
Output
All routes use platform-appropriate transitions without per-route configuration
Common Mistakes
- ✗Omitting a platform — routes on that platform get the default transition
- ✗Combining PageTransitionsTheme with go_router CustomTransitionPage — CustomTransitionPage overrides the theme
Interview Tip
💡
Show you know both levels: app-wide theme (PageTransitionsTheme) and per-route overrides (CustomTransitionPage).
#PageTransitionsTheme#transitions#Material#platform-adaptive