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.