How to Use AnimatedContainer in Flutter for Smooth UI Animations

Use Flutter's AnimatedContainer widget to animate changes in its properties like size, color, and padding smoothly over a set duration. Wrap your widget with AnimatedContainer, update its properties inside setState(), and Flutter will animate the transition automatically.

Syntax

The AnimatedContainer widget animates changes to its properties over a given duration. You specify the properties you want to animate such as width, height, color, padding, and margin. When these properties change, Flutter animates the transition smoothly.

• duration: How long the animation lasts.
• curve: The animation curve (speed pattern).
• width, height: Size of the container.
• color: Background color.
• child: The widget inside the container.

dart

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

Output

A blue square container 100x100 pixels with the text 'Hello' inside it.

Example

This example shows a square that changes size and color when you tap a button. The changes animate smoothly over one second.

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _size = 100;
  Color _color = Colors.blue;

  void _changeProperties() {
    setState(() {
      _size = _size == 100 ? 150 : 100;
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AnimatedContainer Example')),
        body: Center(
          child: AnimatedContainer(
            width: _size,
            height: _size,
            color: _color,
            duration: Duration(seconds: 1),
            curve: Curves.easeInOut,
            child: Center(child: Text('Tap the button')),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _changeProperties,
          child: Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

Output

A square container in the center that smoothly changes size between 100 and 150 pixels and color between blue and red each time the button is tapped.

Common Pitfalls

• Not wrapping property changes inside setState() so the UI does not update.
• Using AnimatedContainer without specifying duration, which is required.
• Trying to animate properties that AnimatedContainer does not support (like border radius without decoration).
• Forgetting to use const where possible to improve performance.

dart

Wrong:
AnimatedContainer(
  width: 100,
  height: 100,
  color: Colors.blue,
  // Missing duration causes error
  child: Text('Hello'),
)

Right:
AnimatedContainer(
  duration: Duration(milliseconds: 500),
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text('Hello'),
)

Quick Reference

• duration: Required. Controls animation length.
• curve: Optional. Controls animation speed pattern.
• width, height: Size properties to animate.
• color: Background color to animate.
• padding, margin: Can also animate spacing.
• Wrap property changes in setState() to trigger animation.

Key Takeaways

Use AnimatedContainer to animate changes in size, color, padding, and more with minimal code.

Always specify a duration and wrap property changes inside setState() to trigger animations.

AnimatedContainer smoothly transitions between old and new property values automatically.

Use the curve property to customize the animation speed and feel.

Avoid animating unsupported properties or forgetting required parameters like duration.