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 { double _width = 55; double _height = 55; Color _color = Colors.green; BorderRadiusGeometry _borderRadius = BorderRadius.circular(9);

@override Widget build(BuildContext context) { } }

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 {

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());
        });
      },
    ),
  ),
);

} }

Output:

Flutter AnimatedContainer Widget (original) (raw)

Creating a StatefulWidget:

Adding AnimatedContainer widget:

Altering the properties: