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.
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.
Learn how to use the PageTransitionSwitcher to integrate the FadeThrough transition between tabs in the app.
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.
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.