Flutter - AnimatedContainer Widget - GeeksforGeeks

21 Feb, 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 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.
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) {  }}
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,);
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());            });          },        ),      ),    );  }}
  
Output:
 
Media error: Format(s) not supported or source(s) not found
 
ankit_kumar_
varshagumber28
android
Flutter
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
What is widgets in Flutter?
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - BorderRadius Widget