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.

class ContainerPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ContainerState();
}

class _ContainerState extends State<ContainerPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.CONTAINER),
      ),
      body: SingleChildScrollView(
          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
           Text("Hello world")
        ],
      )),
    );
  }
}

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")

 Column(
        children: <Widget>[
           Text("Hello world")
        ],
      )

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.

  Container(
            color: RED,
            child: Text("Hello world"),
          )

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.

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })

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.

 Container(
            color: GREEN,
            child: Text("Color color"),
          ),

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.

  final EdgeInsetsGeometry padding;

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.

 Container(
            color: YELLOW,
            padding:
                EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30),
            child: Container(
              color: BLUE_DEEP,
              child: Text("this.padding"),
            ),
          )

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.

EdgeInsets.all();
EdgeInsets.fromLTRB();
EdgeInsets.symmetric();

4. width & height

double width,
double height,

As you can see, it will control its width,height with these two parameters. Just see a example.

Container(
            width: 200.0,
            height: 100.0,
            color: GREEN,
            child: Text("width = 200 , height = 100"),
          ),

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.

  final EdgeInsetsGeometry margin;

A example.

 Container(
            color: RED,
            child: Container(
              margin:
                  EdgeInsets.only(left: 10.0, right: 50.0, top: 10, bottom: 30),
              color: GREEN,
              child: Text("this.margin"),
            ),
          ),

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.

  final AlignmentGeometry alignment;

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.

 Container(
            color: BLUE_LIGHT,
            alignment: Alignment.bottomRight,
            height: 200,
            child: Text("this.alignment"),
          ),

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.

 Container(
            color: YELLOW,
            height: 100.0,
            alignment: AlignmentDirectional.bottomEnd,
            child: Text(
              "HellH",
              textDirection: TextDirection.rtl,
            ),
          )

7. constrains

We can see the define param, its class is BoxConstaints.

BoxConstraints constraints,

It has many constructors, such as tight, looseand expand. I will focus on these three constructors, others will remain to you.

tight

BoxConstraints.tight(Size size)
    : minWidth = size.width,
      maxWidth = size.width,
      minHeight = size.height,
      maxHeight = size.height;

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

 BoxConstraints.loose(Size size)
    : minWidth = 0.0,
      maxWidth = size.width,
      minHeight = 0.0,
      maxHeight = size.height;

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

const BoxConstraints.expand({
    double width,
    double height
  }): minWidth = width != null ? width : double.infinity,
      maxWidth = width != null ? width : double.infinity,
      minHeight = height != null ? height : double.infinity,
      maxHeight = height != null ? height : double.infinity;

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.

 Container(
            color: BLUE_LIGHT,
            constraints: BoxConstraints.expand(height: 50.0),
            child: Text("BoxConstraints constraints"),
          ),

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.

 Decoration decoration,
 this.foregroundDecoration,
 final Decoration foregroundDecoration;

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

 Container(
            constraints: BoxConstraints.expand(height: 100.0),
            padding: EdgeInsets.all(10),
            decoration: ShapeDecoration(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(10.0),
                  ),
                ),
                color: RED),
            child: Text("decoration: ShapeDecoration"),
          )

BoxDecoration

 Container(
            constraints: BoxConstraints.expand(height: 200.0),
            alignment: Alignment.center,
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
                gradient: LinearGradient(colors: [BLUE_LIGHT, YELLOW]),
                shape: BoxShape.circle),
            child: Text("decoration: BoxDecoration"),
          ),

9. this.transform

  final Matrix4 transform;

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.

 Container(
            padding: EdgeInsets.only(top: 10, left: 10),
            constraints: BoxConstraints.expand(height: 100, width: 100),
            color: BLUE_LIGHT,
            child: Text("this.transform"),
          ),
          Container(
            padding: EdgeInsets.only(top: 10, left: 10),
            constraints: BoxConstraints.expand(width: 100, height: 100),
            color: RED_LIGHT,
            transform: Matrix4.rotationY(pi / 4)..rotateX(pi / 4),
            child: Text("this.transform"),
          )

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​	​