Introduce

Container is one of the most commonly used widgets when UI code is in the flutter, so I will introduce its properties that we often use.

The widget container contains a child widget and some other widget properties, you can see the doc details at the link below

https://api.flutter.dev/flutter/widgets/Container-class.html

Now let’s go and see what the container has

Container

The first is to initialize a container.

width & height

Defines the size of the container

child

If there are no children, the container will be as large as possible. If there are children, the container will follow its child size.

Container without children

Container with children

Another example

color

Use the Color class or the Colors class to add a background color to the container.

or

aligment

Use the aligment property to set the location for the child widget of the container

The classes that can be used as the value of an aligment are:

Aligment uses a coordinate system with the origin (0, 0) being the center of the container AlignmentDirectional uses a coordinate system with the origin (0, 0) being the center of the container, but depends on the writing direction, for example ltr then start at left and right end, rtl then start on right and end on left FractionalOffset uses coordinate system with origin (0, 0) as top left of Aligment container You can create new Aligment with x, y values desired or use available constants.

or

Details of the value x, y of Aligment you can see the corresponding figure below

AlignmentDirectional

Similar to aligment we also have 2 ways to create new AlignmentDirectional with desired x, y values ​​or use available constants.

or

Details of the x, y values ​​of AlignmentDirectional with TextDirection.ltr and TextDirection.ltr you can see respectively as in the image below

FractionalOffset

Similar to aligment we also have 2 ways: create new FractionalOffset with desired x and y values ​​or use available constants.

or

Details of the value x, y of FractionalOffset you can see the corresponding image below

constraints

The constraints attribute defines the size constraint of the container. Usually we will use BoxConstraints.

As we said above, when there are no children, the container will have the largest size possible, but when adding the maxHeight and maxWidth properties, it will be limited.

Now creating a child widget, the child will not be able to exceed the size of the container and be cut off

margin & padding

Defines the distance between the container’s boundary with parent equal to margin and with child using padding

There are many ways to define margin and padding with EdgeInsets, so I will give examples of some commonly used cases

decoration & foregroundDecoration

Assign some UI properties to the container, the precedence of decoration and child as shown below.

Normally, we will use BoxDecoration here, so I will introduce you some of the properties of BoxDecoration that we will often use.

BoxDecoration

color Use to set the color of the box, use the Color class or the Colors class as the container

image

Use image as the background for the box, the image will be above the color

border

Set border for the box

borderRadius

Set radius for the border of the box

shape

Set the shape for the box, and get the value BoxShape.rectangle or BoxShape.circle

boxShadow

Set shadow for the box

gradients

Set the gradient background for the box

backgroundBlendMode

Background dynamic mode affects the decoration, foregroundDecoration, child of that Container

transform

Use this property to transform the container, pass the Matrux class