What’s New in Flutter Animations

Flutter team announced an exciting new animations package in recent months. This package includes animations created using Material Motion Specifications, which contain several transition patterns that can help users better understand your application and navigate within it.

In this blog post, I briefly discuss these animations and show you examples of how you can use them in your Flutter application.

Motion System

First of all, it is useful to understand what the Motion System is. Motion System consists of a series of transition patterns that allow you to improve the user experience and make it easier for your users to navigate within your application. This way, you can both improve the user experience and get a beautiful look.

I have mentioned the animations package for you to use these transition patterns in your Flutter application. This package currently includes four transition patterns. Let’s examine each.

1. Container Transform

As the name suggests, we can apply the Container Transform transition pattern to widgets containing containers. This pattern will act as a bridge, creating a visible link between the two screens.

As can be seen in the GIF, we can use this pattern in 4 different ways:

• Transition from Card Widget to Detail Page
• Transition from List Item to Detail Page
• Transition to Detail Page via Floating Action Button
• As an Extensible Search Bar

Frankly, my favorite pattern is the Container Transform. The variety of use cases and the strengthening of the relationships by establishing a bridge makes your application look much better.

2. Shared Axis

Shared Axis is used between interfaces with a navigation relationship to help strengthen the relationship between the elements. We can apply this pattern on the X, Y, and Z-axis.

For instance, we can apply as;

As you can see on the GIF, you can use this pattern along the X-axis on your app’s onboarding screen to give a good start. An example of use on the Y-axis would be the steps of a recipe. On the Z-axis, you can capture a beautiful animation between parent-child widgets.

3. Fade Through

Fade Through is a transition pattern that we can use between UIs that are not strongly related to each other. Thanks to this pattern, you can achieve smoother transitions instead of meaningless sharp transitions.

As you can see, we can use it in 3 ways:

• For a nice transition between your targets on the BottomNavigationBar.
• For decorating your page with a beautiful animation while refreshing.
• While switching accounts within your application.

This way, you can get more meaningful transitions between interfaces that do not require strong relationships.

Now let’s see the final pattern.

4. Fade

Fade pattern is used to show and hide dialogue-style widgets within the screen boundaries of your application. Thanks to this pattern, you can make your in-app actions more pleasant.

This pattern has four use cases:

– Dialog
– Menu
– Snackbar
– Floating Action Button

You can get a beautiful look by applying these widgets to show and hide events.

That’s the end of the patterns. Now let’s see an example of an implementation.

Implementation

In this example, I applied the Container Transform transition to the Floating Action Button. You can also use it for the other widgets I mentioned above.

First, we create an empty Flutter project and add our package to our pubspec.yaml file:

dependencies:
animations: ^1.1.2

Then we include the package in the project with the flutter pub get command. As of the date of this blog post, I have installed the latest version, 1.1.2.

Not to make the code too long, I deleted the counter code that came when I created the Flutter project and added a single color container to the Scaffold body section. You can design your page here.

Let’s design our second page before adding the Floating Action Button. I added the Kartaca logo to this page in order not to extend the code further 🙂

We add the codes of the detail page into the lib/details_page.dart file.

I added a Scaffold and placed the logo in a Container widget in the body property on the detail page. To return from this page, we wrap it with the GestureDetector widget and write Navigator.pop(context) to the onTap property.

Now the detail page is ready.

As the last step, we need to add a Floating Action Button with Container Transform transition to our first page.

For the Container Transform transition, we need to use the OpenContainer widget that comes with the animations package. This widget has two required properties: openBuilder and closedBuilder.

As the name suggests, we write the necessary codes for opening and closing in them. We return the detail page we write in openBuilder and design a FAB in closedBuilder.

Let’s review the code:

We return our second-page, DetailsPage, in the openBuilder property. We use the closedShape property to give shape to the Container that we added in closedBuilder. We need to add a few more properties to make it look better: closedColor, closedElevation, and transitionDuration.

We assign the closedColor property the same color that we do in FAB. You can give the values you want to the closedElevation and transitionDuration properties. You can play with Duration to change the speed of your animation.

After adding these properties, the final version of OpenContainer is as follows:

We add this code to Scaffold‘s FloatingActionButton property. The final version of the main.dart and details_page.dart files should look like this:

You can see the output of this code in the GIF below:

I will not include the codes of other transitions in this article to prevent this blog post from getting longer. You can view the codes of other transitions here.

To sum up, with the animations package, you can easily integrate these animations into your application, making your application more effective and beautiful. I hope it will be useful for you.

You can find the code samples from the blog post here.

See you!