NavigationEasy20 XP3 min read
How does the Hero widget work with navigation?
TL;DR: Hero animates a widget from its position in the source route to its position in the destination route. Both routes must have a Hero with the same tag. Flutter handles the animation automatically on push/pop.
Full Answer
Hero (shared element transition) is one of Flutter's most polished built-in navigation animations. When navigating, Flutter flies the hero widget from source to destination coordinates.
- ▸Both source and destination must have Hero(tag: sameValue)
- ▸The tag must be unique among all Heroes on screen
- ▸Works with any PageRoute (MaterialPageRoute, CupertinoPageRoute, go_router)
- ▸Customize transition with Hero(flightShuttleBuilder: ...)
- ▸For list → detail: use the item ID as the Hero tag
🎯
When using Hero in a list, ensure each item has a unique tag (e.g., 'hero-${item.id}'). Duplicate tags on the same screen cause a runtime assertion error.
Code Examples
dartHero in list and detail screens
Output
Tapping a product image causes it to smoothly fly from thumbnail to full-screen on the detail page
Common Mistakes
- ✗Using the same tag for multiple items in a list — causes 'multiple heroes with the same tag' error
- ✗Hero around a widget that changes size significantly — can look jarring; use flightShuttleBuilder to customize
Interview Tip
💡
Hero is a common interview live-coding task. Show the tag: 'product-image-${product.id}' pattern — it's the idiomatic way to handle list-to-detail hero transitions.
#Hero#shared-element#navigation#animation