Material Transitions in Flutter with the Animations Package

Sep 21 2021 Dart 2.13, Flutter, VS Code 1.59

Part 1: Material Transitions in Flutter with the Animations Package

7. Combine Material Transitions with Hero Animations

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 6. Create Custom Route Animations Next episode: 8. Know When to Use the Different Transitions

This video was last updated on Sep 21 2021

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

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.

 onTap: () {
    Navigator.push<void>(
        context,
        MaterialMotionRoutes.sharedAxis(
            MessagePage(message: messages[index]),
            SharedAxisTransitionType.horizontal,
        ),
    );
},
title: Hero(
    tag: 'msg-${messages[index].id}',
    child: Material(
        color: Colors.transparent,
        child: Text(
            messages[index].author,
            style: const TextStyle(fontSize: 18),
        ),
    ),
),
...
tag: 'msg-${message.id}',
...
child: Text(
    message.author,
    ...