Material Transitions in Flutter with the Animations Package

Get up and running with the Material Motion system which is a set of transition patterns that is part of the Material design specification and learn how to integrate the provided transitions into any app. By Emmanuel Okiche.

Login to leave a rating/review
Download materials
Save for later
Share

Learning path

This is part of the Flutter Fundamentals learning path. View Path.

Who is this for?

This course is for Flutter developers who want to learn how to use the ready-made transitions provided by the animations package.

Covered concepts

  • The Material Motion System
  • Understand when to Use Each Transition Pattern
  • PageTransitionSwitcher
  • Custom PageRoutes
  • Combining Transitions with the Hero Widget

Part 1: Material Transitions in Flutter with the Animations Package

Get introduced to the material motion system which is a set of transition patterns and learn how to integrate a basic Container Transform animation to our app.

Dive deeper into the OpenContainer widget and get a good understanding of the most important properties it provides and learn how to use effectively.

Toggle description

Learn how to use the PageTransitionSwitcher to integrate the FadeThrough transition between tabs in the app.

Toggle description

Create a Fade animation and learn how to use the showModal method of the animation package to fade a modal.

Learn about the shared axis animation and work with the reverse property of the PageTransitionSwitcher widget.

Toggle description

See how material transitions can be used with navigation route animations.

Understand when Hero animations can be used with a Material transition and animate a simple transition together with a Hero animation.

Now that you’ve seen how to use the different animations, it’s time to learn the best time to use each one as they enhance the user experience in different ways.