Flutter Container

 

The container in Flutter is a parent widget that can contain multiple child widgets and manage them efficiently through width, height, padding, background color, etc. It is a widget that combines common painting, positioning, and sizing of the child widgets. It is also a class to store one or more widgets and position them on the screen according to our needs. Generally, it is similar to a box for storing contents. It allows many attributes to the user for decorating its child widgets, such as using margin, which separates the container with other contents.

A container widget is same as <div> tag in html. If this widget does not contain any child widget, it will fill the whole area on the screen automatically. Otherwise, it will wrap the child widget according to the specified height & width. It is to note that this widget cannot render directly without any parent widget. We can use Scaffold widget, Center widget, Padding widget, Row widget, or Column widget as its parent widget.

Why we need a container widget in Flutter?

If we have a widget that needs some background styling may be a color, shape, or size constraints, we may try to wrap it in a container widget. This widget helps us to compose, decorate, and position its child widgets. If we wrap our widgets in a container, then without using any parameters, we would not notice any difference in its appearance. But if we add any properties such as color, margin, padding, etc. in a container, we can style our widgets on the screen according to our needs.

A basic container has a margin, border, and padding properties surrounding its child widget, as shown in the below image:

Constructors of the container class

The following are the syntax of container class constructor:

1. Container({Key key,  
2.            AlignmentGeometry alignment,   
3.            EdgeInsetsGeometry padding,   
4.            Color color,   
5.            double width,   
6.            double height,  
7.            Decoration decoration,   
8.            Decoration foregroundDecoration,   
9.            BoxConstraints constraints,   
10.            Widget child,   
11.            Clip clipBehavior: Clip.none  
12. });  

Properties of Container widget

Let us learn some of the essential properties of the container widget in detail.

1. child: This property is used to store the child widget of the container. Suppose we have taken a Text widget as its child widget that can be shown in the below example:

1. Container(  
2.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
3. )  

2. color: This property is used to set the background color of the text. It also changes the background color of the entire container. See the below example:

1. Container(  
2.     color: Colors.green,   
3.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
4. )  

3. height and width: This property is used to set the container's height and width according to our needs. By default, the container always takes the space based on its child widget. See the below code:

1. Container(  
2.     width: 200.0,  
3.     height: 100.0,  
4.     color: Colors.green,   
5.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
6. )  

4. margin: This property is used to surround the empty space around the container. We can observe this by seeing white space around the container. Suppose we have used the EdgeInsets.all(25) that set the equal margin in all four directions, as shown in the below example:

1. Container(  
2.     width: 200.0,  
3.     height: 100.0,  
4.     color: Colors.green,   
5.     margin: EdgeInsets.all(20),  
6.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
7. )  

5. padding: This property is used to set the distance between the border of the container (all four directions) and its child widget. We can observe this by seeing the space between the container and the child widget. Here, we have used an EdgeInsets.all(35) that set the space between text and all four container directions:

1. Container(  
2.     width: 200.0,  
3.     height: 100.0,  
4.     color: Colors.green,   
5.     padding: EdgeInsets.all(35),  
6.     margin: EdgeInsets.all(20),  
7.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
8. )  

6. alignment: This property is used to set the position of the child within the container. Flutter allows the user to align its element in various ways such as center, bottom, bottom center, topLeft, centerRight, left, right, and many more. In the below example, we are going to align its child into the bottom right position.

1. Container(  
2.     width: 200.0,  
3.     height: 100.0,  
4.     color: Colors.green,   
5.     padding: EdgeInsets.all(35),  
6.     margin: EdgeInsets.all(20),  
7.     alignment: Alignment.bottomRight,  
8.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
9. )  

7. decoration: This property allows the developer to add decoration on the widget. It decorates or paint the widget behind the child. If we want to decorate or paint in front of a child, we need to use the forgroundDecoration parameter. The below image explains the difference between them where the foregroundDecoration covers the child and decoration paint behind the child.

The decoration property supported many parameters, such as color, gradient, background image, border, shadow, etc. It is to make sure that we can either use the color property in a container or decoration, but not in both. See the below code where we have added a border and shadow property to decorate the box:

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. /// This Widget is the main application widget.  
6. class MyApp extends StatelessWidget {  
7.   
8.   @override  
9.   Widget build(BuildContext context) {  
10.     return MaterialApp(  
11.       home: Scaffold(  
12.         appBar: AppBar(  
13.           title: Text("Flutter Container Example"),  
14.         ),  
15.         body: Container(  
16.           padding: EdgeInsets.all(35),  
17.           margin: EdgeInsets.all(20),  
18.           decoration: BoxDecoration(  
19.             border: Border.all(color: Colors.black, width: 4),  
20.             borderRadius: BorderRadius.circular(8),  
21.             boxShadow: [  
22.               new BoxShadow(color: Colors.green, offset: new Offset(6.0, 6.0),),  
23.             ],  
24.           ),  
25.           child: Text("Hello! I am in the container widget decoration box!!",  
26.               style: TextStyle(fontSize: 30)),  
27.         ),  
28.       ),  
29.     );  
30.   }  
31. }  

We will see the output as below screenshot:

8. transform: The transform property allows developers to rotate the container. It can rotate the container in any direction, i.e., change the container coordinate in the parent widget. In the below example, we will rotate the container in the z-axis.

1. Container(  
2.     width: 200.0,  
3.     height: 100.0,  
4.     color: Colors.green,   
5.     padding: EdgeInsets.all(35),  
6.     margin: EdgeInsets.all(20),  
7.     alignment: Alignment.bottomRight,  
8.     transform: Matrix4.rotationZ(0.1),   
9.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
10. )  

9. constraints: This property is used when we want to add additional constraints to the child. It contains various constructors, such as tight, loose, expand, etc. Let's see how to use these constructors in our app:

tight: If we use size property in this, it will give fixed value to the child.

1. Container(  
2.     color: Colors.green,   
3.     constraints: BoxConstraints.tight(Size size)  
4.         : minWidth = size.width, maxWidth = size.width,  
5.           minHeight = size.height, maxHeight = size.height;   
6.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
7. )  

expand: Here, we can choose the height, width, or both values to the child.

1. Container(  
2.     color: Colors.green,   
3.     constraints: BoxConstraints.expand(height: 60.0),   
4.     child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
5. )  

Let us understand it with an example where we will try to cover most of the container properties. Open the main.dart file and replace it with the below code:

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. /// This Widget is the main application widget.  
6. class MyApp extends StatelessWidget {  
7.   
8.   @override  
9.   Widget build(BuildContext context) {  
10.     return MaterialApp(  
11.       home: MyContainerWidget(),  
12.     );  
13.   }  
14. }  
15.   
16. class MyContainerWidget extends StatelessWidget {  
17.   @override  
18.   Widget build(BuildContext context) {  
19.     return MaterialApp(  
20.       home: Scaffold(  
21.         appBar: AppBar(  
22.           title: Text("Flutter Container Example"),  
23.         ),  
24.         body: Container(  
25.           width: double.infinity,  
26.           height: 150.0,  
27.           color: Colors.green,  
28.           margin: EdgeInsets.all(25),  
29.           padding: EdgeInsets.all(35),  
30.           alignment: Alignment.center,  
31.           transform: Matrix4.rotationZ(0.1),  
32.           child: Text("Hello! I am in the container widget!!",  
33.               style: TextStyle(fontSize: 25)),  
34.         ),  
35.       ),  
36.     );  
37.   }  
38. }  

Output

When we run this app, it will give the following screenshot: