AnimatedContainer Tutorial for Beginners

If you are new to Flutter, learning how to create smooth and interactive animations is one of the most exciting parts. In this guide, we will focus on AnimatedContainer, a widget that makes it easy to animate changes in size, color, border radius, and more without writing complex animation controllers. This tutorial is designed for beginners who want to understand the basics of Flutter animations step by step.

What is AnimatedContainer?

The AnimatedContainer widget is a special type of container in Flutter that automatically animates its properties when they change. Unlike a normal container, it doesn’t just instantly change; instead, it smoothly transitions from the old value to the new value. This is extremely useful for creating beautiful UI effects with minimal effort.

Why Use AnimatedContainer?

AnimatedContainer saves time and reduces complexity compared to manual animation handling. Some reasons you should use it include:

• No need to use AnimationController for basic transitions.
• Automatically animates between old and new values.
• Supports duration and curve for custom animation effects.
• Perfect for simple UI effects like resizing, color transitions, and rounded corners.

Basic Syntax of AnimatedContainer

AnimatedContainer(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Center(child: Text("Hello")),
)

In this code snippet, when any of the properties (width, height, or color) change, Flutter will animate the transition over 1 second with an easeInOut curve.

Step-by-Step Example

Let’s create a simple case study: a box that changes its size, color, and border radius when the user taps on it. This example will help beginners clearly see how AnimatedContainer works in action.

import 'package:flutter/material.dart';

void main() {
  runApp(AnimatedContainerExample());
}

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double _width = 100;
  double _height = 100;
  Color _color = Colors.blue;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  void _changeProperties() {
    setState(() {
      _width = _width == 100 ? 200 : 100;
      _height = _height == 100 ? 200 : 100;
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
      _borderRadius = _borderRadius == BorderRadius.circular(8)
          ? BorderRadius.circular(50)
          : BorderRadius.circular(8);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("AnimatedContainer Tutorial")),
        body: Center(
          child: GestureDetector(
            onTap: _changeProperties,
            child: AnimatedContainer(
              width: _width,
              height: _height,
              decoration: BoxDecoration(
                color: _color,
                borderRadius: _borderRadius,
              ),
              duration: Duration(seconds: 1),
              curve: Curves.easeInOut,
              child: Center(
                child: Text(
                  "Tap Me",
                  style: TextStyle(color: Colors.white, fontSize: 18),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

How This Code Works

Here’s the breakdown of what’s happening:

• StatefulWidget: We use a StatefulWidget because we need to update the state when the user taps.
• setState(): Changes the size, color, and border radius each time the user taps.
• AnimatedContainer: Automatically animates the changes in width, height, color, and border radius.
• GestureDetector: Detects taps and triggers the animation by calling _changeProperties.

Adding Curves for Smoother Animation

Flutter provides many animation curves such as easeInOut, bounceOut, linear, and more. For example:

curve: Curves.bounceOut,

This will make the box bounce when changing its properties, creating a playful effect.

Comparison Table

Let’s compare Container and AnimatedContainer:

Tips for Beginners

• Always wrap AnimatedContainer inside a StatefulWidget when you want dynamic changes.
• Experiment with different curves for unique animation effects.
• Keep duration short (e.g., 300ms–1000ms) for natural-looking animations.
• Use GestureDetector or buttons to trigger changes interactively.

Conclusion

The AnimatedContainer widget is one of the easiest ways to start with Flutter animations. It helps beginners create smooth, professional-looking transitions without writing complex code. By practicing with width, height, color, and border radius, you can create engaging UIs that feel alive and interactive. Once you master this widget, you’ll be ready to explore more advanced Flutter animation techniques.

For more official documentation, you can visit Flutter AnimatedContainer Docs.