Naturally, human brains process visual information faster and more precisely than text-based information and Animation improves visual appearance and experience to the end-users.
In this tutorial, we will learn about pre-built Animations. In flutter, we have an awesome set of libraries that can be used to make complex animations.
Table of contents
What is Flutter :
Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time.
Animations
Animations improve the visual appearance and experience for your end-users. Animations become useful when you want to display UI changes, transitions, or a specific state of your app. This Animation package contains pre-canned animations for commonly-desired effects. We can customize it according to our requirements.
Material motion is a set of transitions that helps the users and navigate the app as described in the Material Design Guidelines. Right now there are flowing transitions available in this package.
Code Implementation
Add dependency
dependencies:
animations: ^2.0.0- Container transform
- Shared axis
- Fade through
- Fade
Container transform: transitions between UI elements that include a container, creates a visible connection between two distinct UI elements by seamlessly transforming one element into another.
To implement Container transform we can use the OpenConatiner widget provided by the animation packages. OpenContainer allows defining the container when it is closed.
Output :
Shared axis: transitions between UI elements that have a spatial or navigational relationship, uses a shared transformation on the x, y, or z-axis to reinforce the relationship between elements.
To implement Shared Axis transition animation package provides two widgets PageTransitionSwitcher and SharedAxisTransition.
The PageTransitionSwitcher switches transition from an old child to a new child when it changes the child. In this animation, we should always set a new unique key to the child so that Flutter will know that the widget has now a new child.
In the SharedAxisTransition widget, we can set transition type(alog x,y,z axis).
Output :
Fade Through: transitions between UI elements that do not have a strong relationship to each other, use a sequential fade out and fade in, with a scale of the incoming element.
This is the same as SharedAxisTransition. Here we are using FadeThroughTransition.
Output
Fade: The fade pattern is used for UI elements that enter or exit within the bounds of the screen, such as a dialog that fades in the center of the screen.
To implement this we’ve to use FadeScaleTransition and an AnimationController to control the exit and entry of the child. We also use AnimationControllerit to check the child is visible or hide.
Output :
Conclusion
In this article, I have explained the Animations package demo which you can modify and experiment with according to your own. This little introduction was about default animation.
I hope this blog will provide you with sufficient information in trying up to use the Animations in your flutter projects. We will show this demo program for working Animations in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
