AnimationsMedium30 XP3 min read
How do you create custom page transition animations?
TL;DR: Use PageRouteBuilder to define a transitionsBuilder callback that returns your animated widget. You receive the animation (0→1 forward) and secondaryAnimation (0→1 when a new route is pushed on top).
Full Answer
Every push/pop navigation triggers a route animation. Flutter's default is a slide-up on iOS and fade on Android, but PageRouteBuilder lets you fully customize it.
transitionsBuilder Parameters
- ▸animation: forward animation (0→1 on push, 1→0 on pop)
- ▸secondaryAnimation: animation of the route being covered by a new push
- ▸child: the page widget to animate
🎯
For go_router, use CustomTransitionPage and provide your transitionsBuilder there.
Code Examples
dartSlide + fade custom page transition
Output
// Page slides in from right while fading in
Common Mistakes
- ✗Animating the child directly inside the builder and ignoring secondaryAnimation — causes jarring parallel-push behavior
- ✗Using StatelessWidget as the page — it re-creates on every animation frame; animations should wrap, not rebuild
Interview Tip
💡
Mentioning secondaryAnimation shows depth. It handles what happens to Route A when Route B pushes on top (e.g., scale down the background).
#page-route#custom-transition#page-route-builder#go-router