In this post we will shed light on some core concepts which are important to learn before diving into animations in Flutter applications.
We can build amazing animations with Flutter framework. Animations help to enhance user experience as well as to create Physics based simulations and even games.
However, before we can dive into creating animations in Flutter, we need to understand some basic concepts beforehand. These are the core topics which you will be using in any kind of animations that you build.
The Animation is a generic (T) type abstract class that consists of value and status of the animation.
It can also broadcast the current value and status of animation to other listening objects.
As the name suggest, Animation Controller class controls and manages animations. We can control animation’s properties like upper/lower limits, duration, progress (forward, reverse or stop) etc using the Animation Controller.
Animation Controller need a Ticker Provider to obtain a ticker to make a call to the callback method on animation frame change event.
The ticker provider can be:
- SingleTickerProviderStateMixin (for only one animation controller)
- TickerProviderStateMixin (for multiple animation controllers) depending upon use case.
Tween is also a generic type class which enables the animation to interpolate from list of double values, list of enum states etc.
Animation object needs a range of values to be used during the animation. Tween enables the animation to interpolate between a list of provided values during the animation.
An Animated Widget is a special type of widget that rebuilds itself based on the value of the object that it is listening to.
The Listenable object should be passed as a parameter in the constructor on the class that extends Animated Widget.
The Animated Widgets are mostly useful for stateless widgets for building re-usable animations.
We can use the Animated Builder to build complex animations in Flutter. They can describe an animation as part of build method for another larger widget.
While an Animated Widget tightly couples with the animation, the Animated Builder can help to decouple animating widget from the animation transition.
Only the widget that needs to be rebuilt should be passed inside a animated builder.