Animations In Flutter : Explicit Animations
Introduction to Explicit Animations.
This is a continuation of Animations In Flutter series. Be sure to check out the previous articles in the series if you haven’t.
In last few articles we’ve learned about Implicit Animations with flutter and gone though understanding what are they? and when? and how to use them?
Let’s now dive into understanding Explicit Animations.
Explicit Animations :
What if what you want to achieve is not possible using the Implicit animations? That’s when Explicit animations come in.
They allow us to create complex animations and give us the overall control of our animation from start to end. They overcome the limitations that we face while using Implicit animations and thus more suited for animations which involve granular control.
Using Explicit Animations involves working with AnimationController and AnimatedBuilder primarily. You can call them the building blocks for Explicit Animations.
To start using them , we have to first add SingleTickerProviderStateMixin or TickerProviderStateMixing to our StateFulWidgetdepending on whether we are working with single or multiple animationControllers.
AnimationController :
The AnimationController is a stateful Animation<double>. It helps us to control our animation , provides us with the value of animation, its status, etc and also provides us with the listener which gets called when the animation value changes.
Let’s not forget to dispose of the _animationControllerin the dispose() method as well.
AnimatedBuilder :
Among the many other great choices that flutter offers for building animations, AnimatedBuilder is one of them.
Using it is as simple as it gets. It takes in three primary parameters.
- animation : Animation object that’s driving the animation.
- builder : Every time the animation value changes, it gets called and builds the widgets underneath.
- child : When you’ve a widget that’s independant of the animation then you can pass it as the child parameter for performance reasons. The chid is not rebuild everytime animation changes.
Tween :
When working with Explicit Animations ,you would often find yourself also working with Tweens.
Tween object represents the set of values for a property that you want to animate like a begin and end value for size of container.
When working with animationControllers, you’ll find the need to convert Tween into Animation objects to use them.
This is done by calling Tween().animate(_animationController) method on a tween and passing in the _animationController that will drive this animation.
The value for the Animated object created is derived from the Tween itself.
Example :
All the steps necessary for animation to work are implemented as discussed above. Added the singleTickerProviderMixin, initializing and disposing controller properly.
We are passing on the _animationController.value to the Transform.scale to scale the Container size during the animation.
At last , we start the animation by calling .forward() on _animationController.
That’s it! This was our small but important introduction to Explicit Animations in Flutter.
Hope you all enjoyed this!🙂
👏 Enjoyed the article! Would appreciate the clap :)
🚀 More such articles coming where we explore flutter and other interesting stuff in app development.
👋 Follow up for upcoming articles if you enjoyed reading and learning from what I write.
💬 Let me know what you liked and what you would like to read in upcoming articles.
Master Explicit Animations through this Design challenge.
Repo contains source code for all the animations we learned so far.
