Flutter Series: Detailed Explanation of Container Layouts Commonly Used in Flutter

Introduction

In the previous article, we listed all the layout classes in flutter, and introduced two very commonly used layouts in detail: Row and Column.

Mastering the above two basic layouts is not enough. If we need to deal with daily layout use, we also need to master more layout components. Today we will introduce a powerful layout: Container layout.

Use of Container

Container is a blank container, which can usually be used to encapsulate other widgets. So why do you need to encapsulate widgets in Containers? This is because Container contains some special functions.

For example, the Container can set the background color or background image, and can set padding, margins and borders. This provides a lot of room for customization of components.

First look at the definition and constructor of Container:

 class Container extends StatelessWidget {
  Container({
    Key? key,
    this.alignment,
    this.padding,
    this.color,
    this.decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
  })

You can see that Container is a StatelessWidget, and its constructor can pass in a number of very useful properties to control the performance of Container.

There are padding, decoration, constraints and margins in the Container which are related to the position. What is the relationship between them?

The container first wraps the child with padding, and the padding can be filled with decoration.

The filled padding can be limited by constraints (such as width and height), and then the component can be wrapped with margin blanks.

Next, let's look at an example of a simple Container containing Column and Row.

First construct a container widget, which contains a Column:

 Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        color: Colors.white,
      ),
      child: Column(
        children: [
          buildBoxRow(),
          buildBoxRow(),
        ],
      ),
    );
  }

Here, a BoxDecoration is set for the Container, which is used to specify the background color of the Container.

A Column widget is given in Child, and its child is a Row object.

 Widget buildBoxRow()  => Row(
    textDirection: TextDirection.ltr,
    children: [
      Container(
        width: 100,
        child: Image.asset("images/head.jpg")
      )
    ],
  );

The Row here is another Container object that contains an Image.

Finally run, we can get the following interface:

Container contains two lines, each line contains an Image object.

Rotate Container

By default, Container is a widget with normal layout, but sometimes we may need to implement some special effects, such as the rotation of components. The transform property provided by Container can easily do this.

For the Container, the transform is first applied in the component drawing. After the transform, the decoration will be drawn, then the child will be drawn, and finally the foregroundDecoration will be drawn.

Still the above example, let's try how the transform attribute works, we add the transform attribute to the container containing the image:

 Widget buildBoxRow()  => Row(
    textDirection: TextDirection.ltr,
    children: [
      Container(
          transform: Matrix4.rotationZ(0.2),
        width: 100,
        child: Image.asset("images/head.jpg")
      )
    ],
  );

The final generated APP is as follows:

You can see that the picture has been rotated along the Z axis.

The rotation here is Matrix4.rotationZ, which is selected along the Z axis. Of course, you can use rotationX or rotationY to rotate along the X axis or Y axis respectively.

If you choose rotationX, the image should look like this:

In fact, Matrix4 can not only rotate along individual axes, but also select specific vector orientations.

For example the following two methods:

 /// Translation matrix.
  factory Matrix4.translation(Vector3 translation) => Matrix4.zero()
    ..setIdentity()
    ..setTranslation(translation);

  /// Translation matrix.
  factory Matrix4.translationValues(double x, double y, double z) =>
      Matrix4.zero()
        ..setIdentity()
        ..setTranslationRaw(x, y, z);

Matrix4 can also be abbreviated in three directions, as follows:

 /// Scale matrix.
  factory Matrix4.diagonal3Values(double x, double y, double z) =>
      Matrix4.zero()
        .._m4storage[15] = 1.0
        .._m4storage[10] = z
        .._m4storage[5] = y
        .._m4storage[0] = x;

Interested friends can try it by themselves.

BoxConstraints in Container

When setting Constraints in Container, we use BoxConstraints. BoxConstraints has four properties with numbers, minWidth, maxWidth, minHeight and maxHeight.

So BoxConstraints provides constructors for these four values:

 const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  }) : assert(minWidth != null),
       assert(maxWidth != null),
       assert(minHeight != null),
       assert(maxHeight != null);

BoxConstraints also has two constructors loose and tight:

 BoxConstraints.loose(Size size) 
BoxConstraints.tight(Size size)

What's the difference between these two? If the minimum value of an axis is 0, then the BoxConstraints is loose.

If the maximum and minimum values of an axis are equal, then the BoxConstraints are tight.

There is also a very common method in BoxConstraints as follows:

 BoxConstraints.expand({double? width, double? height})

Expand means that the maximum and minimum values are infinity. The specific definition can be seen from the implementation of the method:

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

Summarize

Container is a very common layout component that everyone can use proficiently.

Example from this article: https://github.com/ddean2009/learn-flutter.git

For more information, please refer to http://www.flydean.com/08-flutter-ui-layout-container/

The most popular interpretation, the most profound dry goods, the most concise tutorials, and many tricks you don't know are waiting for you to discover!

Welcome to pay attention to my official account: "Program those things", understand technology, understand you better!