• Hero Transition
    • 1. Update the dogImage method of your _DogCardState class
    • 2. Update the dogImage method of your _DogDetailPageState class

    Hero Transition

    The hero transition is even more impressive and easier to work with.

    This is what a hero animation does:

    Hero animation screenshot

    And you can make it happen with four new lines of code.

    1. Update the dogImage method of your _DogCardState class

    1. // dog_card.dart
    3. Widget get dogImage {
    4.   // Wrap the dogAvatar widget in a Hero widget.
    5.   var dogAvatar = Hero(
    6.     // Give your hero a tag.
    7.     //
    8.     // Flutter looks for two widgets on two different pages,
    9.     // and if they have the same tag it animates between them.
    10.     tag: dog,
    11.     child: Container(
    13.     // ...
    14.     // Close the Hero parentheses at the bottom of the dogAvatar widget.

    2. Update the dogImage method of your _DogDetailPageState class

    Add almost the exact same two links of code:

    1.   Widget get dogImage {
    2.     return Hero(
    3.       // The same code, except the Dog property lives on the widget in this file.
    4.       tag: widget.dog,
    5.       child: Container(
    6.         height: dogAvatarSize,
    8.     // ...
    9.     // Close the Hero parentheses at the bottom of your widget.