What is a Flutter container?
In Flutter, the UI is built entirely out of different widgets nested inside each other. A Flutter container is a widget/class used to apply styling effects to a widget. It serves as a container that can house a widget in it. It is equivalent to HTML's <div> tag or React's <View> component. The styling is applied to the child widget and not the parent widget.
Basic elements
A simple container widget has the following elements:
Margin: The space separates the container from other elements and its parent widget.
Border: The border around the parent widget can be in different shapes. We can also set its color and thickness.
Padding: It is the space that separates the border from the child of the container.
Child: It is the widget that is stored inside the container.
These are all demonstrated in the illustration below:
Constructor
The constructor of the container class has the following syntax:
Container({Key key,Color color,double width,double height,Widget child,AlignmentGeometry alignment,EdgeInsetsGeometry padding,EdgeInsetsGeometry margin,Decoration decoration,Decoration foregroundDecoration,BoxConstraints constraints,Matrix4 transform,Clip clipBehavior: Clip.none,});
All the above-mentioned parameters are optional and named parameters.
Properties
All the properties of the container class are listed in the constructor syntax above. Their details are:
Color: It is used to set the color of the entire container.
Container(// this will set the color of the container to redcolor: Colors.red,)
Width/height: These are used to set the width/height of the container.
Container(// this will set the width to 100px and the height to 50pxwidth: 100,height: 50,)
Child: It is used to provide a child widget to the container that it will store. For example, a
Textchild widget can be enclosed in a container as:
Container(child: Text("Hello world"),)
Alignment: It is used to adjust the position of the child within the container. Its value can be either
center,bottom,bottomCenter,topLeft,centerRight,left,right, and more. Its syntax would be:
Container(alignment: const topLeft,)
Padding: It is used to set the distance between the border and the child of the container.
Container(// this will add 20px padding on all sidespadding: const EdgeInsets.all(20),)
Margin: It is used to set the distance between the container's border and outer elements.
Container(// this will add 20px margin on all sidesmargin: const EdgeInsets.all(20),)
Decoration/forgroundDecoration: It is used to add decoration to the container widget. The
decorationfunction paints the widget behind the child whileforgroundDecorationpaints the widget in front of a child. We can control different parameters such as shadow, color, gradient, and more.
Container(// this will add add a red-colored border of width 4 on the background// of the childdecoration: BoxDecoration(border: Border.all(color: Colors.red, width: 4)))
Constraints: It can be used to provide additional constraints to the child widget such as setting a minimum height.
Container(// this will expand the child's width by 70pxconstraints: BoxConstraints.expand(width: 70))
Transform: It can be used to rotate the container in any direction.
Container(// this will rotate the container along the x-axistransform: Matrix4.rotationX(0.5))
clipBehaviour: This attribute is used to clip the contents. The default value is
Clip.none. It can also be used in a way that clips the content in half from one side or from the top.
