The official Documentation of Flutter describes all the layout widgets, which I intend to translate into a tutorial that the front-end can understand.

I with code to explain all parts, if you need to run the code, can download the initial code in advance, htps://github.com/FrankFang/pz11hUSS3pSJ line and then rewrite the 54 to 60 and run.

Single child layout component

These widgets support only a single child element, which can be specified using the Child attribute.

Container

The most common layout container, like a div, supports attributes other than color, width, height, There are also padding, margin, alignment, constraints, decoration, foregroundDecoration, transform, clipBehavior.

child: Text(‘hi’)

padding

Nested + margin

Align: indicates the content alignment

Constraints: constraints

For example, the maximum width (note that I deleted width). If you don’t add maxWidth, the Container automatically extends horizontally to the left and right sides, much like div.

-Leonard: Decorations

The color property is just a shorthand for decoration.

You can also support gradients

It also supports image backgrounds

CenterSlice is also supported. See this tutorial and the BoxDecoration documentation for more details

ForegroundDecoration: foregroundDecoration

The 99 in Color(0x99ff0000) is opacity. If you change 99 to FF, it’s completely opaque, and hi is invisible.

Deformation of transfrom:

clipBehavior

It is used to optimize the clip, which is not currently used.

Center

A container that automatically extends up, down, left, and right, with its child centered. The width and height cannot be specified, and most of the time only child is accepted.

Here’s the Text without Center, here’s the Text with Center.

Padding

Only the padding and child containers are accepted.

To the front end, the Padding part is very confusing. Why does the Padding need to shrink the Container to only accept the Padding and child? Isn’t it more convenient to use the Container directly? This is the difference in thinking caused by different programming paradigms. Flutter advocates “Composition, rather than inheritance”. The differences here are not listed.

In addition, if you look at the Container code, when the Container receives the padding argument, it creates a padding widget.

// The build method of the Container
if(effectivePadding ! =null)
      current = Padding(padding: effectivePadding, child: current);
Copy the code

Margin

There are no Margin widgets, so keep that in mind at the front end.

The Container source code uses the Padding to achieve Margin:

// Build the Container if (margin! = null) current = Padding(padding: margin, child: current);Copy the code

If Container specifies both padding and margin, the flutter uses two layers of padding. Container = padding > padding > Child, The Padding on the outside represents margin, and the Padding on the inside represents Padding.

Align

Container only supports the Container of the alignment and child. You can use Container instead.

AspectRatio: Containers with specified child ratios

Let’s say this is a one-to-one container.

However, if the width is not enough, it will not maintain the scale, such as the following container uses the screen width because the width is not 500:

ConstrainedBox

Containers that accept only constraints and children can be replaced by containers.

Transform

Container can be used to replace containers that only accept transform, alignment, and Child.

DecoratedBox

To be continued…