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

// dog_card.dart

Widget get dogImage {
  // Wrap the dogAvatar widget in a Hero widget.
  var dogAvatar = Hero(
    // Give your hero a tag.
    //
    // Flutter looks for two widgets on two different pages,
    // and if they have the same tag it animates between them.
    tag: dog,
    child: Container(

    // ...
    // 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:

  Widget get dogImage {
    return Hero(
      // The same code, except the Dog property lives on the widget in this file.
      tag: widget.dog,
      child: Container(
        height: dogAvatarSize,

    // ...
    // Close the Hero parentheses at the bottom of your widget.