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());
});
},
),
),
);
}
}
Output:
Similar Reads
Flutter - AnimatedIcon Widget
Animation has become a vital part of UI design, whether it be a transition from one window to another or the closing of the window, the animation plays an important role in the smooth representation of the process. Just like that when we click on the icon, it shows animation, or another icon is show
3 min read
Flutter - AnimatedPositioned Widget
The AnimatedPositioned widget in Flutter is used to create animated transitions for a widget's position within a Stack. It allows you to smoothly change the position of a child widget by animating the values of the left, top, right, and bottom properties. In this article, we are going to implement t
4 min read
Flutter - AnimatedBuilder Widget
The AnimatedBuilder widget in Flutter is a powerful utility widget that is used for creating complex animations by rebuilding a part of the widget tree in response to changes in an animation's value. It is especially useful when you want to animate properties of child widgets that cannot be directly
4 min read
Flutter - AnimatedCrossFade Widget
AnimatedCrossFade Widget creates a fade transition between two widgets when one widget is replaced by another. It is used when you need to give a fade kind of transition in between two widgets. It supports any kind of Flutter Widget like Text, Images, Icon as well as anything that is extended from t
3 min read
Flutter - AnimatedSwitcher Widget
The AnimatedSwitcher widget in Flutter is used to animate the transition between two or more widgets with a smooth animation. It's often used when you want to switch the display of different widgets within the same space and provide a visual transition effect between them. In this article, we are go
4 min read
Animated Widgets in Flutter
The animations are considered hard work and take time to learn. Flutter made it easy with its packages. To animate the widgets without much effort, we can wrap them inside different defined animated widgets in the animate_do package. In this article, we will see how with the animate_do package we ca
4 min read
Flutter - AnimatedPhysicalModel Widget
In Flutter, the AnimatedPhysicalModel widget is used to create animations that transition between different physical properties of a widget, such as elevation, shape, and colour. In this article, we are going to implement the AnimatedPhysicalModel widget. A sample video is given below to get an idea
4 min read
Flutter - Banner Widget
Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an ex
3 min read
Flutter - ConstrainedBox Widget
ConstrainedBox is a built-in widget in flutter SDK. Its function is to add size constraints to its child widgets. It comes quite handy if we want a container or image to not exceed a certain height and width. It is also good to keep text in a wrapped layout by making the Text widget a child on Const
2 min read
Flutter - Fading a Widget
Every application needs to navigate through multiple pages and components in an application. In flutter one way to do so is to make the use of routes (ie, pages). But when there is a need to just remove a part (element) from a page, using routes becomes redundant. This is where Fading comes in. In t
3 min read