Material Transitions in Flutter with the Animations Package

The Hero widget is used to animate a widget across screens during a route transition. This is otherwise known as shared element or hero animations. It would be cool to combine hero animations with some of the transitions covered in this course.

However, while testing out the package, we discovered that Hero widgets do not work with these transitions when used inside an OpenContainer or a PageTransitionSwitcher. But it works with the PageRouteBuilder approach which we used earlier in this course. We could combine a hero animation with a transition from the animations package. We’ll be working with the inbox page.

Currently, when we click on a message, it navigates to the detail page using the default route transition.

Let’s change that up to use a shared axis transition. Head over to the inbox_page.dart file. And then update your code to the following:

 onTap: () {
    Navigator.push<void>(
        context,
        MaterialMotionRoutes.sharedAxis(
            MessagePage(message: messages[index]),
            SharedAxisTransitionType.horizontal,
        ),
    );
},

In here, we updated the push method to use a shared axis transition from the MaterialMotionRoutes class instead of the MaterialPageRoute it used before. We also set it to be a horizontal transition type.

Next, let’s add a hero animation for the message title.Go ahead and update your code to the following:

title: Hero(
    tag: 'msg-${messages[index].id}',
    child: Material(
        color: Colors.transparent,
        child: Text(
            messages[index].author,
            style: const TextStyle(fontSize: 18),
        ),
    ),
),

In here, we wrap the text with a material widget and then the Hero widget. We wrap the text first we a material widget because the text widget doesnt work well with the hero widget. So the fix is to wrap the text with a material widget. We then give the hero a unique tag, in this case, we use the message id. Note: for the animation to work, the tag must match the hero’s tag in the destination route.

Let’s do that now for the destination route. I’ll go ahead and copy the hero widget code. Then I’ll head over to message_page.dart file. Scroll down to the MessageBox widget. And replace the text widget with the hero widget we just copied.

Finally, i’ll update the tag and text to match the MessageBox widget like so:

...
tag: 'msg-${message.id}',
...
child: Text(
    message.author,
    ...

Save your work. And try it out. You can see we have a nice shared axis transition together with a hero animation for the message title text.