Flutter – Animation
Sameeha moogab
2024
Outline
• What is Animation
• Aspects of the animation
• Animation System
What is Animation
• 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.
Aspects of the animation
The most important aspects of the animation are as
follows:
• Animation have two distinct values: Start value and
End value. The animation starts from Start value and
goes through a series of intermediate values and
finally ends at End values. For example, to animate a
widget to fade away, the initial value will be the full
opacity and the final value will be the zero opacity.
Aspects of the animation
• The intermediate values may be linear or non-linear
(curve) in nature and it can be configured.
Understand that the animation works as it is
configured. Each configuration provides a different
feel to the animation. For example, fading a widget
will be linear in nature whereas bouncing of a ball
will be non-linear in nature.
Aspects of the animation
• The duration of the animation process affects the speed
(slowness or fastness) of the animation.
• The ability to control the animation process like starting the
animation, stopping the animation, repeating the animation
to set number of times, reversing the process of animation,
etc.
Animation System
• In Flutter, animation system does not do any real animation.
Instead, it provides only the values required at every frame to
render the images.
Animation
• Generates interpolated values between two numbers over a
certain duration. 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
The Flutter Animation Framework?
• Flutter provides a robust and reliable animation
framework that eases the development of
animations. Let’s have a look at some of the essential
components of the Flutter app’s framework:
AnimationController
• It controls the timing and playback of an animation in
your Flutter app. It allows the user to describe a
duration ,curve ,and animation loop or reverse.
AnimationController controller = AnimationController(
duration: Duration(seconds: 2),
vsync: this,
);
Tween Animation
• It defines a range of values that an animation should
interpolate between. If you want to animate a widget
position from one point to another, use a
Tween<Offset>in your example.
Animation<Offset> positionAnimation = Tween<Offset>(
begin: Offset(0, 0),
end: Offset(100, 100),
).animate(controller);
AnimatedBuilder
• It is a handy tool for creating widgets that are based on
animation.It also allows you to rebuild a part of your UI tree
when ever the animation value changes.Let’s have a look at a
simple example of how to use AnimatedBuilder:
Work flow of the Flutter Animation
• Define and start the 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();
Work flow of the Flutter Animation
• 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. });
});
Work flow of the Flutter Animation
• Build-in widgets, Animated Widget and
AnimatedBuilder can be used to skip this process.
Both widget accepts Animation object and get
current values required for the animation.
• 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.
