Widgets 01 | Container - Flutter Open

Search…
Widgets 01 | Container
This tutorial is about how to use the container in the flutter. You learn more detail about Container to use in this tutorial.
What is Container?
Container means a parent widget that contain a child widget and manage it, such as width, height, background and so on.
Facebook Page
Twitter
GitHub
​Flutter Open ​
​NieBin​
​NieBin​
Before start
Before use it, we should create page to contain it, we create a ContainPage as a code structure in order to show our code. 
1
class ContainerPage extends StatefulWidget {
2
  @override
3
  State<StatefulWidget> createState() => _ContainerState();
4
}
5
​
6
class _ContainerState extends State<ContainerPage> {
7
  @override
8
  Widget build(BuildContext context) {
9
    return Scaffold(
10
      appBar: AppBar(
11
        title: Text(PageName.CONTAINER),
12
      ),
13
      body: SingleChildScrollView(
14
          child: Column(
15
          crossAxisAlignment: CrossAxisAlignment.start,
16
        children: <Widget>[
17
           Text("Hello world")
18
        ],
19
      )),
20
    );
21
  }
22
}
Copied!
You do not need to understand the code above, you just need to know, we will code in the children of Columnlike Text("Hello world")
1
 Column(
2
        children: <Widget>[
3
           Text("Hello world")
4
        ],
5
      )
Copied!
Then It will be show you like this.
Simple use.
If you want to use a Container, you can just replace the Text("Hello world") like below, it just contain a child with default parameters.
1
  Container(
2
            color: RED,
3
            child: Text("Hello world"),
4
          )
Copied!
It will show you like this. So easy, Ha!
cut out part of the screen
Constructor
We can simple use now, but we don't know what it really can do, let's look at the constructor of the Container.
1
Container({
2
    Key key,
3
    this.alignment,
4
    this.padding,
5
    Color color,
6
    Decoration decoration,
7
    this.foregroundDecoration,
8
    double width,
9
    double height,
10
    BoxConstraints constraints,
11
    this.margin,
12
    this.transform,
13
    this.child,
14
  })
Copied!
We know it has these parameters, so let's see the detail using of these parameters.
1. this.child
This parameter is used to add a child widget for the container, like the Text("Hello world"), only if  the type of this parameter is a widget, it can be used here.So the example is above, we do not need more explanation for it.
2. Color color
The color is used above, you can see that it change the background color of the text. So we can see that, the color is the background-color of the container. The type is the Color.We can add a Container with green color. 
1
 Container(
2
            color: GREEN,
3
            child: Text("Color color"),
4
          ),
Copied!
It will show like this.
You should care about the color parameter, it can't be used when there also have the parameter `Decoration decoration`. So the two parameters, you can use only one parameter.
3. this.padding
This parameter is used to set its child distance from four directions. We can see its define in the code.
1
  final EdgeInsetsGeometry padding;
Copied!
Then we know that we must use the class extend EdgeInsetsGeometry. So we only have two choices: EdgeInsetsDirectional and EdgeInsets in the flutter. EdgeInsetsDirectional is depends on direction of the TextDirection, its using is the same as EdgeInsets. Now, let's focus on the class EdgeInsets , it just depends on the distance from top,bottom, left and right.
1
 Container(
2
            color: YELLOW,
3
            padding:
4
                EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30),
5
            child: Container(
6
              color: BLUE_DEEP,
7
              child: Text("this.padding"),
8
            ),
9
          )
Copied!
Add the arrow description what is the top, bottom, left, right for padding with EdgeInsets.
There are also others functions of the EdgeInsets.You can use them as your try, such as below.
1
EdgeInsets.all();
2
EdgeInsets.fromLTRB();
3
EdgeInsets.symmetric();
Copied!
4. width & height
1
double width,
2
double height,
Copied!
As you can see, it will control its width,height with these two parameters. Just see a example.
1
Container(
2
            width: 200.0,
3
            height: 100.0,
4
            color: GREEN,
5
            child: Text("width = 200 , height = 100"),
6
          ),
Copied!
5. this.margin
This parameter has some similar with the this, they are both about the distance from the edge. But there is some different between two parameters. Let's see the different in the picture.
If we see the define with margin parameter, you can see its type is same as the padding withEdgeInsetsGeometry. So we can use EdgeInsets too.
1
  final EdgeInsetsGeometry margin;
Copied!
A example.
1
 Container(
2
            color: RED,
3
            child: Container(
4
              margin:
5
                  EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30),
6
              color: GREEN,
7
              child: Text("this.margin"),
8
            ),
9
          ),
Copied!
margin
You can see, we use the different param comply the same distance effect.
6. this.alignment
We can see the define in the project.
1
  final AlignmentGeometry alignment;
Copied!
But you do not use it directly , you should use its child class. Let's see the relationship about the AlignmentGeometry. 
The Alignment has follow constant.
1
2
3
topLeft
topCenter
topRight
centerLeft
center
centerRight
bottomLeft
bottomCenter
bottomRight
We can use one to the effect, the code means that we show the child at the bottom-right of the Container.
1
 Container(
2
            color: BLUE_LIGHT,
3
            alignment: Alignment.bottomRight,
4
            height: 200,
5
            child: Text("this.alignment"),
6
          ),
Copied!
The same we can use the AlignmentDirectional to show locate our child widget. Also, we have these constants as following.
1
2
3
topStart
topCenter
topEnd
centerStart
center
centerEnd
bottomStart
bottomCenter
bottomEnd
This depends on the direction of textDirection. The using is the same as the Alignment.
1
 Container(
2
            color: YELLOW,
3
            height: 100.0,
4
            alignment: AlignmentDirectional.bottomEnd,
5
            child: Text(
6
              "HellH",
7
              textDirection: TextDirection.rtl,
8
            ),
9
          )
Copied!
7. constrains
We can see the define param, its class is BoxConstaints.
1
BoxConstraints constraints,
Copied!
It has many constructors, such as tight, looseand expand. I will focus on these three constructors, others will remain to you.
tight
1
BoxConstraints.tight(Size size)
2
    : minWidth = size.width,
3
      maxWidth = size.width,
4
      minHeight = size.height,
5
      maxHeight = size.height;
Copied!
This means that if you assign a size to it, which will make a fixed value to it,the min=max. So does not have the change range.
loose
1
 BoxConstraints.loose(Size size)
2
    : minWidth = 0.0,
3
      maxWidth = size.width,
4
      minHeight = 0.0,
5
      maxHeight = size.height;
Copied!
You can see this constructor, the min =0.0 and the max is the assign value. So you give a max value to it if you assign a value like this.
expand
1
const BoxConstraints.expand({
2
    double width,
3
    double height
4
  }): minWidth = width != null ? width : double.infinity,
5
      maxWidth = width != null ? width : double.infinity,
6
      minHeight = height != null ? height : double.infinity,
7
      maxHeight = height != null ? height : double.infinity;
Copied!
That means you can choose width or height or both to assign. If you assign to it, the param will be a fixed value and min=max. If you do not assign, it will be equal to infinity, so it will as large as possible in the parent widget. This time, I just show an example with expand.
1
 Container(
2
            color: BLUE_LIGHT,
3
            constraints: BoxConstraints.expand(height: 50.0),
4
            child: Text("BoxConstraints constraints"),
5
          ),
Copied!
In the code above, the minHeight,maxHeight=50.0,minWidth,maxWidth =double.infinity. Show below.
8. decoration & foregroundDecoration
In the part, I will tell you two parameters, they have the same type but different effect.
1
 Decoration decoration,
2
 this.foregroundDecoration,
3
 final Decoration foregroundDecoration;
Copied!
So let's see different between them as below. We can see the foregroundDecoration cover on the child, and the child is upon the decoration. 
This is main different between them, so I just show you how use the decoration then you can use the foregroundDecoration as the same way. The Decoration is abstract class, so you can't use it directly. You must use its child class, let's see its extends relation with two main classes.
ShapeDecoration
1
 Container(
2
            constraints: BoxConstraints.expand(height: 100.0),
3
            padding: EdgeInsets.all(10),
4
            decoration: ShapeDecoration(
5
                shape: RoundedRectangleBorder(
6
                  borderRadius: BorderRadius.all(
7
                    Radius.circular(10.0),
8
                  ),
9
                ),
10
                color: RED),
11
            child: Text("decoration: ShapeDecoration"),
12
          )
Copied!
BoxDecoration
1
 Container(
2
            constraints: BoxConstraints.expand(height: 200.0),
3
            alignment: Alignment.center,
4
            padding: EdgeInsets.all(10),
5
            decoration: BoxDecoration(
6
                gradient: LinearGradient(colors: [BLUE_LIGHT, YELLOW]),
7
                shape: BoxShape.circle),
8
            child: Text("decoration: BoxDecoration"),
9
          ),
Copied!
9. this.transform
1
  final Matrix4 transform;
Copied!
This parameter is used to change the container coordinate in the parent widget. Because this parameter relate with the math, it will be a bit difficult to understand. So we just get a simple to show the effect, do not go deep with this class.
1
 Container(
2
            padding: EdgeInsets.only(top: 10, left: 10),
3
            constraints: BoxConstraints.expand(height: 100, width: 100),
4
            color: BLUE_LIGHT,
5
            child: Text("this.transform"),
6
          ),
7
          Container(
8
            padding: EdgeInsets.only(top: 10, left: 10),
9
            constraints: BoxConstraints.expand(width: 100, height: 100),
10
            color: RED_LIGHT,
11
            transform: Matrix4.rotationY(pi / 4)..rotateX(pi / 4),
12
            child: Text("this.transform"),
13
          )
Copied!
Conclusion 
Then, our container is complete, you do need understand all of them, just know there are some parameters you can use to comply your requirement and choose to use , also you need to take more excise to make better. Good luck!
Thanks for your reading!
The end.
Whole code in GitHub,star to support.
​
Facebook Page
Twitter
QQ Group
GitHub
​
​Flutter Open ​
​NieBin​
963828159
​NieBin​
​
​