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

Material Transitions in Flutter with the Animations Package

Sep 21 2021 · Video Course (32 mins) · Beginner

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.

5/5 1 Rating

Version

  • Dart 2.13, Flutter, VS Code 1.59

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.

1

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

2

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

3

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

4

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

5

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

6

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

7

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.

8

Next course in this Learning 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

Contributors

Comments