Flutter - AnimatedContainer Widget

Last Updated : 20 Dec, 2022

In Flutter a container is a simple widget with well-defined properties like height, width, and color, etc. The AnimatedContainer widget is a simple container widget with animations. These types of widgets can be animated by altering the values of their properties which are the same as the Container widget. These types of animation in Flutter is known as 'Implicit Animation. We will discuss then in detail in this article by building a simple app with AnimatedContainer widget.

Constructor of AnimatedContainer class:

AnimatedContainer(
{Key key,
AlignmentGeometry alignment,
EdgeInsetsGeometry padding,
Color color,
Decoration decoration,
Decoration foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
EdgeInsetsGeometry margin,
Matrix4 transform,
Widget child,
Curve curve: Curves.linear,
@required Duration duration,
VoidCallback onEnd}
)

Properties of AnimatedContainer Widget:

alignment: This property takes AlignmentGeometry class as the object. It controls the alignment of the child widget with the container.
child: This property holds a widget as the object to show inside the AnimatedContainer.
constraints: BoxConstraints class is the object to this property. It applies some extra constraints to the child widget in the AnimatedContainer.
decoration: This property takes in Decoration class as the object to apply color behind the child widget.
foregroundDecoration: This property controls the default color of the text inside the AnimatedContainer.
margin: The margin property holds EdgeInsetsGeometry class as the object. It adds empty space around the widget.
padding: This property also takes EdgeInsetsGeometry class as the object to add empty space inside the AnimatedContainer and the child widget.
transform: This property takes Matrix4 as the object to apply matrix transformation before painting the AnimatedContainer.

Follow the below steps to build an application with AnimatedContainer widget:

Create a StatefulWidget and define its properties.
Add an AnimatedContainer widget and define its properties.
Create animation by altering those properties.

Let's discuss them in detail.

Creating a StatefulWidget:

Use the custom State class to create a StatefulWidget and define its properties as shown below:

Dart

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  double _width = 55;
  double _height = 55;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(9);

  @override
  Widget build(BuildContext context) {
  }
}

Adding AnimatedContainer widget:

Add an AnimatedContainer widget with its duration property defined that determines how long the container is going to animate as shown below:

Dart

AnimatedContainer(

  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),

  duration: Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
);

Altering the properties:

Rebuilding and changing the properties after the end of duration specified property is done as shown below:

Dart

FloatingActionButton(
  child: Icon(Icons.play_arrow),
  onPressed: () {

    setState(() {
      final random = Random();

      // random dimension generator
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();

      // random color generator
      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );
      _borderRadius =
          BorderRadius.circular(random.nextInt(100).toDouble());
    });
  },
);

Complete Source Code:

Dart

import 'dart:math';

import 'package:flutter/material.dart';

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

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {

  double _width = 70;
  double _height = 70;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(10);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksForGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            duration: Duration(seconds: 1),
            curve: Curves.fastOutSlowIn,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          backgroundColor: Colors.green,
          onPressed: () {
            setState(() {
              // random generator
              final random = Random();

              // random dimension generator
              _width = random.nextInt(500).toDouble();
              _height = random.nextInt(500).toDouble();

              // random color generator
              _color = Color.fromRGBO(
                random.nextInt(300),
                random.nextInt(300),
                random.nextInt(300),
                1,
              );

              // random radius generator
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
        ),
      ),
    );
  }
}