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

07. Combine Material Transitions with Hero Animations

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 06. Create Custom Route Animations Next episode: 08. Know When to Use the Different Transitions

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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

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,
    ...