Fun Animations in Flutter
Just a simple animation adds more details to UI and interaction brings a new fun in accessing the app. It not only makes our app look good but also give a spike of uniqueness and amaze our user.
Animations in flutter are SIMPLE and also POWERFULL enough to handle the heavy lifting. But Animations in flutter Comes with handle with care CAUSION because it quickly becomes complex and confusing and making our animation jerky and unpleasant.
Animations in Flutter are basically progress values that get interpolated in the time provided and render the new frame as the new interpolated values get inserted by TickerProvider (will clear this further).
LET’s start with the fundamentals of Animations in the flutter and meet some important family members of animations
Animation class
This class basically provides the progressive values of the parameter of type double / Size / BorderRadius / Shape / Color … (Animation is itself a class with generic value Animation<T>). This class only holds the animation value and doesn't deal with UI frames.
Some of the Properties are -
- Records the current value of the property being animated.
- Records the current status of animation (eg Currently running, Stopped, etc.)
Animation Controller
The animation Controller is the controller for the specific animation that is implemented. This takes two important parameters first DURATION the time for which the animation should be performed and secondly the vsync which is configured with Ticker Provider of the class this controller is being implemented. Ticker gets registered with the SchedulerBinding and fires a callback every frame. This controller produces values that range from 0.0 (Starting Point For Animation ) to 1.0 ( Point where animation gets completed) in the duration provided. It is the work of this controller to kick the animation to play.
Some of the Properties are -
- Records the duration of the animation.
- Start, Stop, restart, reverse, etc
TWEEN
It simply describes the range that value being animated spans.
Tween can be double, color, offset, Radius, etc.
Now let’s see some code.
Our next Part, we are gonna implement an app using this snippet.
IMPORTANT NOTE:
never forget to dispose your controller to avoid memory leaks.
If you are using only a single animation in your class extend it with SingleTickerProviderStateMixin for multiple animations in the same class use TickerProviderStateMixin.
AnimatedWidget
We usually use this widget to isolate a part of the widget tree where the animation is implemented so only a specific part of the widget is rebuilt rather than sacrificing the performance and rebuilding the entire tree. This helps for performance optimization of animation the situation of the handle with care.
Note here we are not even using setState to render the new frame, this is handled internally by AnimatedWidget.
The Fun part here is that as we have the ParentWidget consisting of Scaffold and Center never get rebuilds, unlike the conventional method of dumping logic in Parents initState which will re-render the frame.
Thus we have saved some Computations during building the widget tree.
Animated Builder
Imagine a state where you have a large subtree just below the widget to which animation is to be applied and there is no need to manipulate the subtree in this case as the frame rebuilds the entire widget tree so the idea here is to cache the subtree and avoid its rebuilding on every new frame.
The same magic continues over here setState is called internally, and also we get rid of building child (which is widget subtree).
With this just Handle your animation with caution and enjoy your Flutter Journey.
In our next part, we are gonna have some fun animations.
AT LAST,
Fun Animations in Flutter Part -2.
