Flutter – Animation

Sameeha moogab
2024
Outline
• What is implicit animations
• What is Explicit Animations
What is Implicit animations
• Implicit animations in Flutter work by
automating the transition between the
start and end states of a widget’s property
over a specified duration.
How Implicit animations Work
Initial Setup:
 You start by defining a widget with its initial
properties. For example, an
AnimatedContainer with a set color and
size.
How Implicit animations Work
Triggering Animation:
 When a property changes (e.g., color or size),
Flutter detects the change and begins the
animation.
 You can trigger changes using setState in a
StatefulWidget:
How Implicit animations Work
Tweening and Rebuilding:
Flutter interpolates between the starting
and ending values, creating
intermediate frames.
The widget is rebuilt multiple times per
second, updating its properties smoothly
over the specified duration.
How Implicit animations Work
Completion:
 Once the duration is complete, the widget
reaches its final state.
 The animation stops, and the widget
remains in its new state until further
changes are triggered.
Common Widgets for Implicit Animations
• 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:
 AnimatedContainer
Widget build(BuildContext context) {
import 'package:flutter/material.dart'; return Scaffold(
body: Center(
child: GestureDetector(
void main() => runApp(MaterialApp(home: MyAnimatedWidget())); onTap: () {
setState(() {
class MyAnimatedWidget extends StatefulWidget { _color = _color == Colors.red ? Colors.blue : Colors.red;
_width = _width == 100.0 ? 200.0 : 100.0;
@override
_height = _height == 100.0 ? 200.0 : 100.0;
_MyAnimatedWidgetState createState() => });
_MyAnimatedWidgetState(); },
} child: AnimatedContainer(
duration: Duration(seconds: 3),
color: _color,
class _MyAnimatedWidgetState extends
width: _width,
State<MyAnimatedWidget> {
height: _height,
Color _color = Colors.red; curve: Curves.bounceOut,
double _width = 100.0; ),
double _height = 100.0; ),
),
);
@override
}
}
AnimatedDefaultTextStyle
• Animates changes in text style properties.
AnimatedPositioned &
AnimatedPositionedDirectional
 AnimatedPositioned
Animates changes in the position of a widget within
a stack.

 AnimatedPositionedDir
ectional
Similar to AnimatedPositioned, but
supports text directionality.
AnimatedSize
• Smoothly animates changes in a widget's
size.
Implicit vs Explicit Animations
1. Ease of Use:
1. Implicit animations are user-friendly and require minimal code to
implement.
2. They are perfect for simple transitions and effects.
2. Automatic Handling:
1. The animation's start, duration, and end are managed automatically by
Flutter.
2. You only need to specify the beginning and ending states of the widget.
3. Limited Control:
1. While they are easy to use, implicit animations offer limited control over
the animation process.
2. Customization options are somewhat restricted compared to explicit
animations.
Explicit Animations
• Explicit animations, on the other hand, provide
developers with more control and flexibility. These
animations require manual setup and management,
which can handle more complex animation scenarios.
Components of Explicit Animations
The foundational elements of explicit animations:
•AimationController
•Animation
•Tween
•CurvedAnimation
AnimationController
• AnimationController is the backbone of explicit animations in Flutter. It manages
the timing and state of an animation, acting as the clock that drives the animation
forward.
Initialization: To create an AnimationController, you need to specify the duration and a
TickerProvider. Typically, this is done in the initState method of a StatefulWidget.
Controlling Animation: You can start, stop, repeat, or reverse the animation using
methods like forward(), reverse(), and repeat().
Listeners: The AnimationController can have listeners attached to it, allowing you to
execute code at every frame of the animation, which is useful for synchronizing other
changes with the animation.
Creating an AnimationController
• Initializing the AnimationController
The AnimationController is the core of any animation in Flutter. It manages the
animation's duration and playback.

duration: The length of time the animation will take to complete.

vsync: Prevents the animation from consuming unnecessary resources when
the screen is not visible.
Creating Animations
Creating Animations with Tween and CurvedAnimation
Tween: Defines the range of values (50 to 200) for the animation.
CurvedAnimation: Adds a bounce effect to the animation.
AnimatedBuilder
• Building the Animated UI
Use AnimatedBuilder to build the widget tree based
on the current animation values: