In order to create a Hero animation, you need to create two Hero widgets: one for the source, and one for the destination.
In order to implement a Hero animation, do the following:
- Create the source Hero. A Hero requires a child, which defines how the hero looks (an image or an Icon like in the example of this recipe, or any other relevant widget), and a tag. You use the tag to uniquely identify the widget, and both Source and Destination Hero widgets must share the same tag. In the example in this recipe, we created the source hero with this instruction:
Hero(tag: 'cup$index', child: Icon(Icons.free_breakfast)),
By concatenating the index to the "cup" string, we achieved a unique tag.
Each Hero requires a unique hero tag: this is used to identify which widget will be animated. In a ListView, for example, you cannot repeat the same tag for the items, even if they have the same child, otherwise, you will get an error.
- Create the destination Hero...