Material Transitions in Flutter with the Animations Package

The next transition on our list is the FadeThroughTransition. We’ll be using it to switch between pages from the BottomNavigationBar.

And here’s its definition. It has a child which is the widget that is being transitioned in and out. The animation property drives the child’s enter and exit animations. The secondaryAnimation is responsible for transitioning the child when a new widget is element is pushed on top of it.

And since this widget has animation objects as some of its properties, we’ll be needing something to drive the animation. For this, we’ll be using the PageTransitionSwitcher. It is quite similar to the AnimatedSwitcher widget in that, it animates the child widget whenever it changes into another widget.

For example, the child widget updating with a different key would trigger the animation. Also, with a PageTransitionSwitcher, you can specify different animations for the the enter and exit animations.

Let’s go ahead and see this in action. Head over to he main_page.dart file. I’ve updated the code to use a BottomNavigationBar that switches the child to display for the main page.

I’m using an IndexedStack as the body of the Scaffold here. Go ahead and wrap the IndexedStack with a PageTransitionSwitcher and update your code to the folowing:

PageTransitionSwitcher(
    transitionBuilder: (
        Widget child,
        Animation<double> primaryAnimation,
        Animation<double> secondaryAnimation,
    ) {

    },
    child: IndexedStack(
        key: ValueKey<int>(_selectedIndex),
        index: _selectedIndex,
        children: <Widget>[..._pages],
    ),
),

The core of the PageTransitionSwitcher is in its transitionBuilder callback function. It has two animation objects as properties. The primaryAnimation is defines how its child appears while the secondaryAnimation defines how the child exits. The transitionBuilder returns a widget and for this we’ll be returning the FadeThroughTransition. Let’s do that now.

...
return FadeThroughTransition(
    child: child,
    animation: primaryAnimation,
    secondaryAnimation: secondaryAnimation,
);
...

In here we assign the animation objects from the transitionBuilder callback function to the properties of the FadeThroughTransition. This would enable the PageTransitionSwitcher drive the animation accordingly. Save your work and try it out.

Cool!!! The tab items are switched with a nice fade through animation. And the fade through animation simply fades out the outgoing child while incoming child fades in and scales up.