NavigationIntermediate30 XP3 min read
How do you create custom route transitions in Flutter?
TL;DR: Override the buildTransitions method in a custom PageRoute, or use PageTransitionsTheme for app-wide transitions. In go_router, use CustomTransitionPage with transitionsBuilder.
Full Answer
- ▸MaterialPageRoute — standard Material slide transition
- ▸CupertinoPageRoute — iOS slide-from-right transition
- ▸PageRouteBuilder — custom buildTransitions with FadeTransition, SlideTransition, etc.
- ▸CustomTransitionPage (go_router) — specify transitionsBuilder per route
- ▸PageTransitionsTheme — set default transitions per platform at app level
🎯
For shared-element transitions (Hero), ensure both screens have a Hero widget with the same tag. Hero works with any PageRoute type.
Code Examples
dartFade transition with go_router
Output
Details screen fades in over 300ms with an ease-in-out curve
Common Mistakes
- ✗Using state.pageKey as the key in CustomTransitionPage — required to avoid re-entering transitions on state changes
- ✗Forgetting to handle secondaryAnimation — affects the previous screen's exit animation
Interview Tip
💡
Mention Hero animations as a related concept — the combination of custom route transitions + Hero is the most polished UX pattern.
#route-transition#PageTransitionsBuilder#CustomTransitionPage#animation