Flutter - Animation

Introduction:
Animation is a process of showing a series of images / picture in a
particular order within a specific duration to give an illusion of
movement. There are different approaches you can take when
creating animations in Flutter.
In flutter animation divided into two categories:
• Draw based animation.
• Code based animation.
Draw Based Animation:
It means that we can import a ready animated pictures or assets and add it
to the flutter app, this type of animated assets always made by third party
framework and related to the flutter apps with many ways, much famous
way is import it as assets and use it inside our app.
There are many frameworks that provides a nice and perfect animation
asset to be added to our app just like:
• Lottie files.
• Flare.
• Rive.
Code based animation :
This type of animation dependence on the creativity of the developer to
make the nice and interested animation which make a life in your flutter
app.
Overall, there are 2 kinds of codex animations in Flutter. Which one to use
depends on the animation you try to make and how you prefer to code and
structure your code.
This type of is divided into two categories:
• Implicit Animation: it gives you less control but it’s a lot easier to
create by using either custom or built-in animated widgets. In Flutter,
you can make your own custom implicit Animation.
• Explicit Animation: it gives you more control by using animation
controllers but it’s more complex to create. In general, if the
animation repeats over and over without stopping or requires control,
we use Explicit Animation with an animation controller to create it.

Explicit or implicit?
Flutter code-based animations come in two flavors: implicit and explicit
animations. The next step is figuring out which type you need.
Implicit animations rely on simply setting a new value for some widget
property and Flutter takes care of animating it from the current value to
the new value. These widgets are easy to use and are amazingly powerful.
All of the animations you see above are done with implicitly animated
widgets. Implicit animations are a good place to start when looking to
animate something.
Explicit animations require an AnimationController. They are called
“explicit” because they only start animating when explicitly asked to. You
can use explicit animations to do everything you can with implicit
animations, plus a little more. The annoying thing is you have to manually
manage the life-cycle of the AnimationController since it’s not a widget,
which means putting it inside a stateful widget. For that reason, your code
is generally simpler if you can get away with using an implicit animation
widget.
There are three questions to ask yourself to determine what type of widget
you need:
1. Does my animation repeat forever?
2. is whether the values in your animation are discontinuous?
 3. is whether multiple widgets are animating in a coordinated fashion
together?
First question, means By “forever” I mean while it’s on a certain screen, or
as long as a certain condition is true, such as music playing.
Second question, means by a discontinuous animation is this growing circle
animation. The circle repeatedly grows small-large, small-large. It never
grows small-large and then shrinks back down again. In this case, the
circle’s size is discontinuous.
If you answered “yes” to any of those three questions, you need to use an
explicit widget. Otherwise, you can use an implicit widget! Once you’ve
decided whether you need an implicit or explicit widget, the last question
will lead you to finding the specific widget you need.
Flutter provides many types of animated widgets to use to make
animations in your App, The Flutter SDK also provides built-in explicit
animations, such as FadeTransition, SizeTransition, and SlideTransition.
These simple animations are triggered by setting a beginning and ending
point. They are simpler to implement than custom explicit animation.
Essential animation concepts and classes
The animation system in Flutter is based on typed Animation objects.
Widgets can either incorporate these animations in their build functions
directly by reading their current value and listening to their state changes
or they can use the animations as the basis of more elaborate animations
that they pass along to other widgets.
Animation<double>:
• Animation, a core class in Flutter’s animation library, interpolates the
values used to guide an animation.
• An Animation object knows the current state of an animation (for
example, whether it’s started, stopped, or moving forward or in
reverse), but doesn’t know anything about what appears onscreen.
The most common Animation classes are :
• Animation<double> − interpolate values between two decimal
number.
• Animation<Color> − interpolate colors between two color
• Animation<Size> − interpolate sizes between two size
• AnimationController − Special Animation object to control the
animation itself. It generates new values whenever the application is
ready for a new frame. It supports linear based animation and the
value starts from 0.0 to 1.0

CurvedAnimation:
A CurvedAnimation defines the animation’s progress as a non-linear curve.
For example :
animation = CurvedAnimation(
parent: controller,
curve:Curves.easeIn);

Tween<T>:
Derived from Animatable<T> and used to generate numbers
between any two numbers other than 0 and 1. It can be used along
with Animation object by using animate method and passing actual
Animation object.

For example:

AnimationController controller = AnimationController(

duration: const Duration(milliseconds: 500), vsync: this);
final Animation curve = CurvedAnimation(parent: controller, curve:
Curves.easeOut);
Animation<int> customTween = IntTween(begin: 0, end:
255).animate(curve);
How to make an animation in your app:
The work flow of the animation is as follows:

1. Define the animation and animation controller as new variables

with late values.
2. Define and start the animation and animation controller in the
initState of the StatefulWidget.
AnimationController(duration: const Duration(seconds: 2), vsync:
this);
animation = Tween<double>(begin: 0, end:
300).animate(controller);
controller.forward();
3. Add animation based listener, addListener to change the state
of the widget.
animation = Tween<double>(begin: 0, end:
300).animate(controller) ..addListener(() {
setState(() {
// The state that has changed here is the animation object’s
value.
});
});

4. Build-in widgets, AnimatedWidget and AnimatedBuilder can

be used to skip this process. Both widget accepts Animation
object and get current values required for the animation.
5. Get the animation values during the build process of the widget
and then apply it for width, height or any relevant property
instead of the original value.
child: Container(
height: animation.value,
width: animation.value,
child: <Widget>,
)