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: