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.
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 |
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.
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
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.
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.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.
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();
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"),
),
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 with
EdgeInsetsGeometry. 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.
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,
),
)
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.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.
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.
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.
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.
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"),
)
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"),
),
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"),
)
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.
Facebook Page | Twitter | QQ Group | GitHub | |
963828159 | |
Last modified 4yr ago