Animating Apps With Flutter
by Aditi Dwivedi in General
Without knowing, you may have used some Flutter apps. Whether you used some digital coupon or ran an ad campaign on Google Ads, you’ve used Flutter. It is the new kid on the block and is expected to bring in revolutionary changes in the mobile app development industry.
Wondering About Animation and Motion Widgets?
All of us know that apps are praised when they are intuitive, good-looking, and provide pleasant feedback to user interactions and- animation is one of the ways to do just that. So, in this blog, I explore the realm of animation and widgets.
To start with, Flutter provides numerous pre-defined widgets that inherently support animation. Just choose the appropriate widget for the required animation, and, pass in the widget’s properties values to animate and you are good to go.
To highlight the ease of animation in Flutter, I cover two animated widgets in this blog.
Enter AnimatedOpacity.
This widget builds on the Opacity widget by adding implicit animation support. How do we use it? It’s pretty simple. We enclose the button widget inside the AnimatedOpacity widget, feed in some proper values and add a condition to trigger the animation — and you are done. Flutter can handle the rest. An important point that you need to note is that the child widget will have its visibility animated and that Flutter interpolates values between 0 and 1. You can see how a condition is placed to change the visibility, thus triggering animation.
Let’s move on to the next one.
AnimatedCrossFade
This widget requires two children as the widget crossfades between them based on some condition. One important thing to keep in mind while using this widget is that both the children should be the same width. If the height is different, then the taller widget gets clipped from the bottom.
Conclusion
Today, almost apps have some kind of subtle animation to delight users. They are an integral part of user experience, and, static apps or apps with janky animation not only lower user retention but also a developer’s reputation to deliver results.
Flutter offers a lot of features for cross-platform development, including rich support for smooth and responsive animations and has great plug-in support which allows us to use animations from other developers. Now that it has matured, and, with so much love from the community, Flutter is bound to get better in the future. I’d say now is a great time to learn Flutter!