Flutter Animations for Beginners: Create Smooth UI Effects Easily

Animations can make Flutter apps feel faster, smoother, and more professional. From button effects to page transitions, Flutter provides simple tools to add animations without writing complex code.

In this tutorial, we will learn how to create basic Flutter animations using AnimatedContainer, AnimatedOpacity, and other built-in widgets.

What Are Flutter Animations?

Flutter animations change widget properties smoothly over time.

Examples:

Changing size
Changing colors
Fading widgets
Moving elements
Creating interactive effects

Flutter animations are mainly divided into:

Implicit Animations: Flutter automatically handles the animation.
Explicit Animations: Developers control animations using AnimationController.

For beginners, implicit animations are the best place to start.

Step 1: Create Flutter Project

Create a new Flutter application:

flutter create animation_demo

Open the project and run:

flutter run

Step 2: Create Your First Animation with AnimatedContainer

AnimatedContainer automatically animates changes in its properties.

double size = 100;
Color color = Colors.blue;

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  width: size,
  height: size,
  color: color,
)

The duration controls how long the animation takes.

Step 3: Trigger Animation

Change values using setState():

ElevatedButton(
  onPressed: () {
    setState(() {
      size = 200;
      color = Colors.green;
    });
  },
  child: const Text("Animate"),
)

When the button is pressed, Flutter smoothly changes the box size and color.

Step 4: Add Animation Curves

Curves control the animation movement style.

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  curve: Curves.easeInOut,
)

Popular curves:

Curves.easeIn
Curves.easeOut
Curves.easeInOut
Curves.bounceOut

Step 5: Useful Flutter Animation Widgets

AnimatedOpacity

Create fade-in and fade-out effects.

AnimatedOpacity(
  duration: const Duration(milliseconds: 500),
  opacity: 0.5,
  child: FlutterLogo(),
)

AnimatedAlign

Move widgets smoothly.

AnimatedAlign(
  duration: const Duration(milliseconds: 500),
  alignment: Alignment.centerRight,
  child: FlutterLogo(),
)

AnimatedPadding

Animate spacing changes.

AnimatedPadding(
  duration: const Duration(milliseconds: 500),
  padding: EdgeInsets.all(30),
  child: FlutterLogo(),
)

Flutter Animation Best Practices

✅ Keep animations between 300–500 milliseconds
✅ Use animations to improve user experience
✅ Avoid unnecessary animations everywhere
✅ Start with implicit animations before learning AnimationController