AnimatedContainer Widget

What is AnimatedContainer Widget?

Animated version of Container that gradually changes its values over a period of time.

The AnimatedContainer will automatically animate between the old and new values of properties when they change using the provided curve and duration.

Default Constructor

The default constructor creates a container that animates its parameters implicitly.

AnimatedContainer(
    width:
    height:
    color:
    alignment:
    duration:
    curve:
);

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

Configure width parameter to define width of the container.

Configure height parameter to define height of the container.

Configure color parameter to fill container with color.

Configure alignment parameter to align the child within the container.

Configure duration parameter to a duration represents a difference from one point in time to another.

Configure curve parameter to adjust the rate of change of an animation over time, allowing them to speed up and slow down, rather than moving at a constant rate.

Code snippet

The following code snippet shows how to configure AnimatedContainer widget.

AnimatedContainer(
    width: selected ? 200.0 : 100.0,
    height: selected ? 100.0 : 200.0,
    color: selected ? Colors.green[400] : Colors.blue[400],
    alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
    duration: Duration(seconds: 2),
    curve: Curves.fastOutSlowIn,
);

Demo Code

The following example transitions of an AnimatedContainer between two states. It adjusts the height, width, color, and alignment properties when tapped.

import 'package:flutter/material.dart';

class AnimatedContainerDemo extends StatefulWidget {
  @override
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: AnimatedContainer(
          width: selected ? 200.0 : 100.0,
          height: selected ? 100.0 : 200.0,
          color: selected ? Colors.green[400] : Colors.blue[400],
          alignment:
              selected ? Alignment.center : AlignmentDirectional.topCenter,
          duration: Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
        ),
      ),
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'AnimatedContainer Widget';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: AnimatedContainerDemo(),
      ),
    );
  }
}

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