Material Transitions in Flutter with the Animations Package

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,
);

The SharedAxisTransition has the animation and secondary animation just like the FadeThroughTransition. This means that this widget controls both the entrace and exit animations for bothe the incoming and outgoing elements.

The main property for this widget is the transitionType property. Here, we set it to horizontal which animates the elements on the horizonal axis. Save your work and try it out.

Nice, the items are transitioned on the horizontal axis. We can change it to animate on the vertical axis:

...
transitionType: SharedAxisTransitionType.vertical,
...

And also on the z axis via by setting the SharedAxisTransitionType to scaled:

...
transitionType: SharedAxisTransitionType.scaled,
...

Before we move on, let’s cover one handy property of the PageTransitionSwitcher widget: “the reverse property.” To see a usecase of this property, change the transition type to horizontal. If you notice, while switching between tabs, the widget always slides in from the right. This does not reflect the correct spatial relationship of the two tabs.

Since they’re side by side, it would make more sense for the tab on the right to slide in from the right while the tab on the left slides in from the left. Go ahead and add the following code:

reverse: _selectedIndex == 0,

In here, we added the reverse property with a condition that whenever we’re switching to the first tab, the animation should be reversed. In this case, the widget would slide in from the left. Save your work. And try it out. Cool, the animation works as expected.