Flutter – AnimatedContainer Widget

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 AnimatedComtainer 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.
  • mrgin: 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 AnimatedConatainer 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

filter_none

edit
close

play_arrow

link
brightness_4
code

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) {
  }
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

AnimatedContainer(
 
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
 
  duration: Duration(seconds: 1),
  curve: Curves.fastOutSlowIn,
);

chevron_right


Altering the properties:

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

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 
 

Output:

 

 




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_