Material Transitions in Flutter with the Animations Package

Next is the fade transition. Fade transitions are used to fade in elements above exiting elements. Sometimes, the underlying elements are dimmed in order to make the entering element stand out.

We could also use a FadeScale transition for the tab animation from the previous episode. Let’s head over to main_page.dart file. And scroll to the PageTransitionSwitcher section. This time around, i’ll comment out the FadeThroughTransition and add a FadeScaleTransition like so:

return FadeScaleTransition(
    child: child,
    animation: primaryAnimation,
);

Save your work. And you can see that the items switches with a fade and scale animation.

But if you notice, there’s a glitch in the transition. And that’s because the inbox page doesnt have a background color. Let’s add that up now. Go ahead and open up the inbox_page.dart file. And i’ll wrap the listview with a container and set the color to white. Then I’ll save my work.

And let’s try it out once more. Cool!!! The pages now transition properly. Next, we’ll be working with the result dialog in the CreateArticle page.

Currently, it uses the showDialog function, to display the results of a successful form submission in an AlertDialog. First, i’ll comment out the logic that only displays the modal when the form is valid. We’re commenting this code just for testing purpose. The entrance and exit animation provided by the showDialog function is just a fade transition.

The animations library provides us with the showModal function which gives us the option of configuring stuffs like the enter and exit animations. Let’s update our code to use this function. Enter the following code:

...
return showModal<void>(
    context: context,
    configuration: const FadeScaleTransitionConfiguration(),
...

The showModal function is similar to the showDialog function. But the showModal function has a configuration property which is just a ModalConfiguration. Unlike the showDialog function where we could directly pass in configurations as arguments of the function, the showModal function gives us the configuration argument which is just a ModalConfiguration.

In here, we could pass in a class that extends ModalConfiguration and set stuffs like the duration, barrier color and a custom animation for the transitions. But the library provides us with the FadeScaleTransitionConfiguration which does just that for us.

The FadeScaleTransitionConfiguration as its name suggests, create a fade and scale animation for the enter and exit animation. Save your work and try it out. I want you to take note of the scaling effect.

For the entrance animation, the dialog fades in with a scale from 80% to 100%. And for the exit animation, the dialog fades out. The main difference between the showDialog and the showModal function is that the showModal function gives us the freedom to create a custom ModalConfiguration where we could create custom transitions.