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

6. Create Custom Route 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: 5. Animate Screens with the SharedAxis Animation Next episode: 7. Combine Material Transitions with Hero Animations

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.

Now, what if we want to programmatically push routes to the Navigator using the animations we’ve covered so far? Well, these transitions are just good ol’ page transitions. So we could use them as transitions for PageRouteBuilders. With this approach, we could simply call the push method and pass in our custom transitions.

flexibleSpace: FlexibleSpaceBar(
    background: InkWell(
        onTap: () {
            Navigator.push<void>(
                context,
                MaterialMotionRoutes.sharedAxis(
                    ArticleImage(article!.urlToImage),
                ),
            );
        },
        child: Image.network(
...
...
MaterialMotionRoutes.sharedAxis(
    ArticleImage(article!.urlToImage),
    SharedAxisTransitionType.horizontal // New code
),