How do Hero animations work in Flutter?
Short Answer
A Hero widget with a matching tag on two different screens tells Flutter to automatically animate that widget flying from its position on the first screen to its position on the second during a navigation transition.
When you push a new route, Flutter searches both the outgoing and incoming page's widget trees for Hero widgets sharing the same tag. If it finds a matching pair, it removes both from their normal positions during the transition and animates a single widget moving and resizing between the two positions and sizes.
This is why Hero animations feel 'free' — you don't manually compute positions or sizes; Flutter's navigator handles the interpolation as part of the standard page-route transition. It works with any push/pop using a route supporting hero animations (like MaterialPageRoute) — custom transitions may need explicit hero support.
Code Example
// Screen A
Hero(tag: 'product-1', child: Image.asset('cover.png'))
// Screen B (pushed via Navigator)
Hero(tag: 'product-1', child: Image.asset('cover.png', width: 300))Common Mistakes
- ×Using the same tag for multiple Hero widgets visible on the same screen — tags must be unique per screen or Flutter can't match them correctly.
- ×Expecting Hero to work across routes that don't support the standard page-transition animation.