Animation and Motion in Flutter
Simple Definition for Animation and
motion in Flutter:
Animation in Flutter means changing how something looks over
time 4 like moving, resizing, rotating, or fading an object
gradually.
Motion in Flutter is about giving your app a smooth, natural, and
meaningful experience when things change 4 like switching
screens or interacting with buttons.
In short:
Animation = visual change over time. Motion = purposeful movement to improve user
experience.
The main animation concepts we will cover are as follows:
Aya Mohamed will cover: Eman Mohamed will cover: Eman Ramadan will cover:
AnimatedContainer AnimatedAlign SizeTransition
AnimatedOpacity AnimatedCrossFade AnimatedPositioned
FadeTransition SlideTransition AnimatedBuilder
Code: Code: Code:
https://ideone.com/Hj3yo3 https://ideone.com/fork/GthvQW https://ideone.com/YeMUfF
https://ideone.com/fork/tHruAo
https://ideone.com/fork/5uPVrI
Magen will cover:
RotationTransition
DecoratedBoxTransition
RotationTransition
1. AnimatedContainer
What is it?
It changes size, color, or shape smoothly over time.
When to use it?
When you want to animate layout changes like width, height, or
color without any controller.
Simple Example:
AnimatedContainer(
duration: Duration(seconds: 1),
width: isBig ? 200 : 100,
height: isBig ? 200 : 100,
color: isBig ? Colors.blue : Colors.red,
)
This box changes size and color smoothly when `isBig` changes.
2. AnimatedOpacity
What is it?
It shows or hides a widget by fading it in or out.
When to use it?
When you want to make a widget appear or disappear with fade
effect 4 no controller needed.
Simple Example:
AnimatedOpacity(
opacity: isVisible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Text("Hello"),
)
The text fades in/out when `isVisible` changes.
3. FadeTransition
What is it?
It also fades a widget in/out but gives more control using an
`AnimationController`.
When to use it?
When you want advanced control: start, stop, reverse, or repeat
the fade.
Simple Example:
FadeTransition(
opacity: animation,
child: Text("Fade Me"),
)
controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
);
animation = Tween(begin: 0.0, end:
1.0).animate(controller);
controller.forward();
The text fades in when the controller starts
What is AnimatedCrossFade?
AnimatedCrossFade is a Flutter widget that fades between two
widgets (i.e., Widget A and Widget B) with a smooth crossfade
animation.
When to use AnimatedCrossFade?
You should use AnimatedCrossFade when:
You want to switch between two different widgets smoothly.
You have two visual states of a UI element (like short info vs.
detailed view).
You want a clean and interactive UI without writing manual
animation code.
Typical use cases:
Collapsing and expanding content
"Read more" buttons
Switching images or widgets in a fun way
Ex:
AnimatedCrossFade(
duration: const Duration(seconds: 3),
firstChild: const FlutterLogo(style:
FlutterLogoStyle.horizontal, size: 100.0),
secondChild: const FlutterLogo(style:
FlutterLogoStyle.stacked, size: 100.0),
crossFadeState: _first ? CrossFadeState.showFirst :
CrossFadeState.showSecond,
)
What is AnimatedAlign?
AnimatedAlign is a Flutter widget that automatically animates
changes to its child9s alignment over a given duration and curve.
Instead of instantly snapping a widget from one position to
another, it smoothly transitions the widget9s position within its
parent container.
When to use AnimatedAlign?
You can use AnimatedAlign when:
You want to move a widget around the screen smoothly
without using complex animations.
You want to change a widget9s position in response to user
interaction (e.g. a button click).
You need simple layout animations like:
Moving a button from top-left to bottom-right
Shifting an image on hover or tap
Animating UI elements based on a state change
What is SlideTransition?
SlideTransition is a Flutter widget that allows you to animate the
position of a widget by sliding it in or out of view, using an
Animation. It creates a smooth sliding effect for widgets 4 great
for dynamic and interactive UIs.
When should you use SlideTransition?
Use SlideTransition when:
You want to move a widget into or out of view using a sliding
motion
You want to animate a widget's position within its parent
You want to enhance UX with simple, smooth entrance or exit
animations
Common use cases:
Animating a sidebar or menu
Showing/hiding a notification or alert
Making UI elements slide in/out on scroll or tap
Creating onboarding/tutorial screens
AnimatedPositioned
is a widget that moves an element from one place to another
on the screen smoothly.
It doesn9t work on its own 4 it must be placed inside a Stack.
Stack, we define the position of each element using properties
like: top, left, right, and bottom.
Required attributes:
Duration: How long the animation takes
top / left / right / bottom: At least one is needed to define
position
child: The widget you want to animate
Optional attributes
Curve , width / height, onEnd;
Code:
AnimatedPositioned(
duration: Duration(seconds: 1),
curve: Curves.bounceIn,
top: 100,
left: moveRight ? 50 : 200,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(
child: Text(
'Move Me',
style: TextStyle(color: Colors.white),
),
),
),
)
SizeTransition
is a widget that animates the size (width or height) of its child
based on an animation value
Imagine something (like a box or text) grows or shrink
Required Parameters:
sizeFactor: Animation that controls the size
axis: Direction: Axis.vertical or horizontal
child: The widget you want to animate
code:
SizeTransition(
sizeFactor: _animation,
axis: Axis.vertical,
child: Container(
width: 200,
height: 100,
color: Colors.blue,
alignment: Alignment.center,
child: Text(
'Expanding Box',
style: TextStyle(color: Colors.white, fontSize: 18),
),
),
)
AnimatedBuilder
helps you rebuild a widget when an animation updates.
It9s flexible: lets you animate any property (like rotation, color,
scale...).
More efficient: only rebuilds the part of UI that needs to
change.
Best choice for custom animations (not covered by default
animated widgets).
Required Parameters:
Animation: The animation to listen to (usually from a
controller).
Builder: function that returns the animated widget tree.
Child: static part of the widget that doesn9t need to rebuild.
RotationTransition
What is it?
RotationTransition is a Flutter widget that smoothly rotates its
child around its centre. It takes an animation value (0.0 for no
rotation, 1.0 for a full 360-degree turn).
Why Use It?
Create animated rotating effects (logos, icons, text).
Make UIs more dynamic and engaging.
Provide visual feedback or loading animations.
Main Syntax:
RotationTransition(
turns: animationController,
child: YourWidget(),
)
Simple Code Example:
AnimationController _controller = AnimationController(
duration: Duration(seconds: 2), vsync: this)..repeat();
RotationTransition(
turns: _controller,
child: Text('J', style: TextStyle(fontSize: 100)),
)
This code smoothly rotates the letter 'J' continuously.
DecoratedBoxTransition
DecoratedBoxTransition is a Flutter widget designed to animate
the decoration of a box. It smoothly transitions properties such as
colour, border, border radius, and shadows, creating dynamic and
visually appealing effects for your UI elements.
Why Use It?
Animate changes to colour, border width, border radius, and
shadows with ease.
Make your UI more interactive and visually engaging.
Provide smooth visual feedback for state changes.
Main Syntax:
DecoratedBoxTransition(
decoration: animation,
child: YourWidget(),
)
Simple Code Example - Animated Border:
AnimationController _controller = AnimationController(
duration: Duration(seconds: 2), vsync:
this)..repeat(reverse: true);
Animation<Decoration> _animation = DecorationTween(
begin: BoxDecoration(border: Border.all(width: 2)),
end: BoxDecoration(border: Border.all(width: 10)),
).animate(_controller);
DecoratedBoxTransition(
decoration: _animation,
child: SizedBox(width: 100, height: 100)
What is AlignTransition?
AlignTransition is a Flutter widget that animates the alignment
(position) of its child within a container. It smoothly moves the
widget from one position to another using an Animation.
Why Use It?
Move widgets smoothly inside a box.
Keep layout simple without using Stack or Positioned.
Animate positions based on alignment values.
Main Syntax:
AlignTransition(
alignment: animation,
child: YourWidget(),
)
Simple Code Example:
AnimationController _controller = AnimationController(
duration: Duration(seconds: 2), vsync:
this)..repeat(reverse: true);
Animation<Alignment> _animation = AlignmentTween(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
).animate(_controller);
AlignTransition(
alignment: _animation,
child: Icon(Icons.star),
)
You'll see a star icon moving smoothly from top-left to bottom-
right inside a container.
- Then it moves back
Thank You
Any Questions?
