In Flutter, a Hero is a widget that flies between screens. Here is an example:
The Hero, in reality, is not the same object from screen to screen. However, from the user perspective, it is. The idea is to make a widget that lives between screens and just changes its appearance in some way. As in the preceding screenshot, the element scales up and moves at the same time the new screen appears. This is what we learn from the three images in the preceding screenshot:
- This is when we tap on a list item. For example, the transition starts while the detailed screen is shown.
- A cut-scene from the transition process. Here, the Hero widget will be changes its position and size until it matches the final result (3).
- The final screen, with the Hero from step 1, with a new size.
The Flutter documentation contains great explanations and examples about the Hero animation. Don't hesitate to check it out, at: https://flutter.dev/docs/development/ui/animations/hero-animations.