AnimationsEasy20 XP3 min read
How do Hero animations work in Flutter?
TL;DR: Hero wraps a widget with a shared tag. During navigation, Flutter finds matching tags on source and destination pages and smoothly interpolates the widget's size, position, and shape between screens.
Full Answer
Hero animations (shared element transitions) are Flutter's built-in mechanism for visually connecting elements across page transitions.
How it works
- ▸Wrap the same widget on both pages with Hero(tag: 'unique-id')
- ▸On navigation, Flutter's Navigator finds matching tags
- ▸The source widget appears to fly to the destination widget's position
- ▸Flutter uses a RectTween to interpolate position and size
⚠️
The tag must be unique across the current route stack. Using duplicate tags on the same page causes a hero tag conflict assertion error.
Code Examples
dartHero animation between two routes
Output
// Image smoothly expands from 80x80 to full-width on navigation
Common Mistakes
- ✗Duplicate tags on the same screen
- ✗Using Hero inside a ListView with same tag for each item — use a unique tag per item (e.g., 'image-$id')
- ✗Expecting Hero to work with arbitrary widgets — the widget on both sides should render the same content
Interview Tip
💡
Mention createRectTween to customize how Hero morphs between shapes. Also note that Hero works automatically with PageRouteBuilder and CupertinoPageRoute.
#hero#shared-element#page-transition#navigation