Material Transitions in Flutter with the Animations Package

Beautiful transitions add more flair to our apps. If done right, they improve the user experience. And if done wrong, they could annoy the user or sometimes distracts them and this creates a bad user experience.

You dont just stamp in any cool animation you see on the internet into your app. Different types of animations serves different purposes and you have to understand where a type of motion could be used.

For instance, good page transitions should reflect the type of relationship between screens. The motion should reflect if the next page is somewhat related to the previous page or not. It should also hint the user if the transition reflects a hierarchy based relationship.

Now you might be syaing to yourself: “But i don’t have a degree in Design.” Not to worry, that’s what design systems like the “Material Motion System” does for us. The specification has outlined the best scenarios to use the animation it provides.

For the container transform, you use it when you want the transforming container to be persisitent between the two screens. This is good for master-detail views where the item in the master view is transitioned into the detail view which shows more information about the item.

This type of transition shows a visible connection between the two screens because of the persistent container that houses both elements.

You can see all the examples displayed here exibits this behaviour. And just like the examples we created earlier, the CreateArticle FAB transforms the CreateArticle page. Same for the article card that transforms to the article detial page.

The SharedAxis transition is used when you want to show spatial or navigational relationship between different widgets. From the first image here, we can see a navigational relationship between the two screens. The next button progresses to the next screen which is part of the onboarding process while registering for the app. So both the login and course selection screens are both related so the shared axis horizontal animation suits this type of scenario.

To show spatial relationships, the middle animation shows a stepper animation for a recipe while switching between steps. For this, it shares the vertical space as the transition guides you through the steps to make the recipe. So the using a vertical shared axis animation makes sense here.

In our article image example, clicking on the article image navigated to the article image page in full screen. This example showed a hierachy which is significant of a navigational relationship.

The FadeThrough animatiton is used when there’s little or no relationship between the two pages or widgets.This could be useful for tab based navigation just like the one we implemented earlier. You can see that the home screen shows a list of articles while the inbox screen shows a list of messges. These two screens are not related and the motion here is like a switch animation whereby we switch between the two screens with fade animation.

We could also use this transition to reintroduce a screen after doing something like a page reload or switching between user profiles in an app. And we can see the examples on the screens shows this.

For fade animations, you need to ask: “Does the new UI enter or exit the screen?” This could be stuffs like menus and dialogs or any widget we want to show within the bounds of an existing screen. These type of widgets simply just enters or exits the current screen.

We could see that from the create article results dialog. The dialog simply enters the screen to display the result of the submitted form then exits when we click the button. The fade animation is best suited for these scenarios.