It is not appropriate to compare Container to a div in a Flutter, but this does not prevent the front end students from using Container as a starting point for learning about Flutter. The official documentation of Flutter is not very intuitive to read. It is not very friendly for students who are used to reading documents with intuitive examples of front-end classes. Therefore, a brief summary is given, starting with the basic usage of Container.

Basic Usage of Container

Generate a yellow Container using the color attribute

Container(
    color: Colors.yellow,
);
Copy the code

Set the margin of the Container using the margin property

Container(
    color: Colors.yellow,
    margin: EdgeInsets.fromLTRB(100.300.100.300),Copy the code

Use the decoration attribute to make the Container a circle. Note that the color attribute and the decoration attribute of the Container can only be stored in one or the other

Container(
    margin: EdgeInsets.fromLTRB(100.300.100.300),
    decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.yellow,
    ),
)
Copy the code

Add a green Child Container to the Container so that the child fills the space of the parent widget

Container(
    color: Colors.yellow,
    child: Container( 
        color: Colors.green,
    ),
);
Copy the code

Set the width and height for the child Container and center it with the alignment attribute:

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        width: 200,
        height: 100,),);Copy the code

Center them with margin

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100.300.100.300),),);Copy the code

Add a text as its child, can you see the text in the upper left corner?

Container(
    color: Colors.yellow,
    child: Text(
        "Quick Dog Taxi",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
);
Copy the code

Use the alignment property to set the alignment of childWidgets. The alignment class is usually used to set the alignment of childWidgets

Container(
    color: Colors.yellow,
    child: Text(
        "Quick Dog Taxi",
        textDirection: TextDirection.ltr,
        style: TextStyle(color: Colors.black),
    ),
    alignment: Alignment.centerLeft, // Alignment.bottomRight ...
);
Copy the code

Wrap the Text in another Container and center it

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        child: Text(
            "Quick Dog Taxi",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
Copy the code

Use the padding property to set the inner margin of the Container

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        color: Colors.green,
        padding: EdgeInsets.fromLTRB(100.20.100.20),
        child: Text(
            "Quick Dog Taxi",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
Copy the code

Use the transform property to set up matrix transformations, which are usually used for rotations

Container(
    color: Colors.yellow,
    child: Container(
        color: Colors.green,
        margin: EdgeInsets.fromLTRB(100.200.100.300),
        transform: Matrix4.rotationZ(0.2),),);Copy the code

You can also set the interior margins, rounded corners, background, borders, and shadows of containers using the Decoration property

Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    child: Container(
        padding: EdgeInsets.fromLTRB(100.20.100.20),
        decoration: BoxDecoration(
            / / the background color
            color: Colors.green,
            / / the rounded
            borderRadius: BorderRadius.circular(10),
            / / frame
            border: Border.all(
                color: Colors.black54,
                width: 2,),/ / the shadow
            boxShadow: [
                BoxShadow(
                    color: Colors.pink,
                    blurRadius: 5.0,)],// Background image
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.centerLeft,
            ),
        ),
        child: Text(
            "Quick Dog Taxi",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
);
Copy the code

Decoration is a bit like ::before and ::after in the CSS. The difference is that they are drawn in different order

// Use decoration
Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    margin: EdgeInsets.all(10),
    child: Container(
        padding: EdgeInsets.fromLTRB(100.20.100.20),
        transform: Matrix4.rotationZ(0.2),
        decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.center,
            ),
        ),
        child: Text(
            "Quick Dog Taxi, quick dog Taxi.",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
)
Copy the code
// Use foregroundDecoration
Container(
    color: Colors.yellow,
    alignment: Alignment.center,
    margin: EdgeInsets.all(10),
    child: Container(
        padding: EdgeInsets.fromLTRB(100.20.100.20),
        transform: Matrix4.rotationZ(0.2),
        foregroundDecoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage('https://static.daojia.com/assets/project/tosimple-pic/icon-about-us_1587887989775.png'),
                alignment: Alignment.center,
            ),
        ),
        child: Text(
            "Quick Dog Taxi, quick dog Taxi.",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),
)
Copy the code

Effect comparison:

As you can see, if you use foregroundDecoration to set the background image, the background image will cover the text, and the opposite is true if you use decoration

Constraints are set using constraints, which constrain themselves and describe how much space the widget is allowed to occupy, and BoxConstraint is usually used to set constraints. This defines the maximum and minimum width and height of the child Container

Child Container Without a child, the child Container uses the maximum height and width allowed by the constraint.

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 100,
            minWidth: 100),),);Copy the code

If a Child Container has a child, the child Container will layout the widget according to its child size and constraints. In this example, the space occupied by the Text widget does not reach the minimum space specified in the constraint, that is, the minimum width and height. In this case, the layout is based on the minimum width and height specified in the constraint

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "Quick Dog Taxi",
            textDirection: TextDirection.ltr,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);
Copy the code

If you increase the amount of space required by the Textwidget in the example above, such as font size, the parent Container of Text is laid out in the maximum constraint space

Container(
    color: Colors.yellow,
    alignment: Alignment.centerLeft,    
    child: Container(
        color: Colors.green,
        constraints: BoxConstraints(
            maxHeight: 300,
            maxWidth: 300,
            minHeight: 50,
            minWidth: 100
        ),
        child: Text(
            "Quick Dog Taxi",
            textDirection: TextDirection.ltr,
            fontSize: 300,
            style: TextStyle(color: Colors.black),
        ),
    ),      
);
Copy the code

So that’s the basic Container usage

reference

  • Container class
  • Flutter — Container Cheat Sheet

Pay attention to our