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

5. Animate Screens with the SharedAxis Animation

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: 4. Work with Fade Transitions Next episode: 6. Create Custom Route 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.

The final transition provided by the animations library is the shared axis transition. It transitions elements based on the horizotal, vertical or the Z axis with a fade animation. Let’s replace the FadeScaleTransition in the main_page.dart file with it. Update your code to the following:

return SharedAxisTransition(
    child: child,
    animation: primaryAnimation,
    secondaryAnimation: secondaryAnimation,
    transitionType: SharedAxisTransitionType.horizontal,
);
...
transitionType: SharedAxisTransitionType.vertical,
...
...
transitionType: SharedAxisTransitionType.scaled,
...
reverse: _selectedIndex == 0,