AnimatedContainer widget and Attributes

AnimatedContainer widget and Attributes


2 min read

The AnimatedContainer widget in Flutter is a container that gradually changes its values over a given duration whenever its properties are updated. It's useful for creating smooth animations for container properties such as size, padding, color, and more.


  1. duration (Duration):

    • The duration of the animation. Specifies how long the animation should take to complete when the container's properties change.
  2. curve (Curve):

    • The curve to be used for the animation. Curves define the rate of change of an animation over time, such as linear, ease-in, ease-out, etc.
  3. alignment (AlignmentGeometry):

    • The alignment of the child within the container. Defaults to
  4. padding (EdgeInsetsGeometry):

    • The padding insets to apply around the child. Padding is animated if specified.
  5. color (Color):

    • The color to fill the container with. The color is animated if specified.
  6. width (double):

    • The width of the container. Width is animated if specified.
  7. height (double):

    • The height of the container. Height is animated if specified.
  8. child (Widget):

    • The widget below this widget in the tree. Typically a widget like Text, Image, Icon, etc.


import 'package:flutter/material.dart';

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

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer Widget Example'),
      body: Center(
        child: GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
            width: _isExpanded ? 200.0 : 100.0,
            height: _isExpanded ? 200.0 : 100.0,
            color: _isExpanded ? :,
            alignment: _isExpanded ? : Alignment.topCenter,
            child: Text(
              _isExpanded ? 'Expanded' : 'Collapsed',
              style: TextStyle(color: Colors.white),

void main() {
    home: AnimatedContainerExample(),


  • In this example, an AnimatedContainer widget is used to create a container that smoothly animates its size and color changes.

  • The _isExpanded boolean variable is toggled when the container is tapped, causing the container to expand or collapse.

  • The duration property is set to Duration(seconds: 1) to specify the duration of the animation as 1 second.

  • The curve property is set to Curves.fastOutSlowIn to define the animation curve for smooth transitions.

  • The width, height, color, and alignment properties of the container change based on the _isExpanded boolean value, causing the container to animate its size and color smoothly.

Did you find this article valuable?

Support Vinit Mepani by becoming a sponsor. Any amount is appreciated!