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.
First of all, it is useful to understand what 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;
— onboarding transitions on the X-axis
— step transitions on the Y-axis
— parent-child widget transitions on the Z-axis
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.
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:
– 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.
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:
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 body section of
Scaffold. 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.
On the detail page, I added a
Scaffold and placed the logo in a
Container widget in the body property. 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
Floating Action Button with
Container Transform transition to our first page.
Container Transform transition, we need to use the
OpenContainer widget that comes with the animations package. This widget has two required properties:
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
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. There are a few more properties we need to add to make it look better:
We assign the
closedColor property the same color that we do in FAB. You can give the values you want to the
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.