Constructor

Let's first look at Container's constructor

Container({
  this.alignment, //Set the alignment of child elements
  this.padding, //Container interior margin, which belongs to decoration decoration scope
  Color color, // background color
  Decoration decoration, // Background decoration
  Decoration foregroundDecoration, //Prospect Decoration
  double width,//Width of container
  double height, //Height of container
  BoxConstraints constraints, //Restrictions on container size
  this.margin,//External whitening of containers does not fall within the decoration scope
  this.transform, //Transformation
  this.child,
})

• Alignment: Set the alignment of the sub widget s in the container. The alignment is as follows:

  1. Alignment: Alignment. bottom Center; // center-down alignment
  2. alignment:Alignment.bottomLeft; //lower left corner alignment
  3. alignment:Alignment.bottomRight; //lower right corner alignment
  4. alignment:Alignment.center; // centered alignment
  5. alignment:Alignment.centerLeft; // center left alignment
  6. alignment:Alignment.centerRight; // alignment in the middle
  7. alignment:Alignment.topCenter; // Centralized alignment
  8. alignment:Alignment.topRight; // Upper Right Angle Alignment
  9. alignment:Alignment.topLeft; //Upper left corner alignment

• padding: Set the interior margin of the container

  1. Set the inner margin: padding: EdgeInsets.only(top: 10.0,bottom: 10.0,left: 10.0,right: 10.0). Here, top, bottom, left, right can be set according to their own needs, not necessarily each set, not set is 0.0.
  2. Circle settings: padding:EdgeInsets.fromLTRB(20.0, 20.0, 30.0, 20.0),LTRB stands for left,top,right,bottom, respectively.
  3. Horizontal and vertical orientation settings: padding: EdgeInsets.symmetric(vertical: 20.0,horizontal: 10.0), when you are up and down, the left and right inner margins are stacked, then you can use this attribute to set vertical to represent the vertical direction, horizontal to represent the horizontal direction.
• Margin: Sets the outer margin of the container, and the value is set in the same way as padding

• Color: Set the background color of the container

  1. Hexadecimal representation: color: Color(0xffFFFFFF), where 0x is fixed, ff represents the transparency of the color, and the six bits behind represent the value of the color.

  2. ARGB representation: color: Color.fromARGB(2, 29, 30, 10)

     1. A transparency, the value range is 0 - 255;
     2. R is red, ranging from 0 to 255;
     3. G green, the range of values is 0 - 255;
     4. B Blue, range 0-255.

  3. RGBO representation: color: color. fromRGBO (20, 30, 100,.9),

     1. R is red, ranging from 0 to 255;
     2. G green, the range of values is 0 - 255;
     3. B blue, the range of values is 0-255;
     4. O transparency, the value range is 0 - 1;
• Width: width of container, expressed in numbers of double type
• Height: container's height, expressed in numbers of double type
• Child: container's child widget

Practice

Exercise 1: container's wide and high background color

• Set a square with a width of 200.0 and a height of 200.0. The background color is black.

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        width: 200.0,//Set Width
        height: 200.0,//Set high
        color: Color(0xff000000),//Setting colors
      ),
    );
  }
}

Exercise 2: Transparency of container

• Set a square with a width of 200.0, a height of 200.0, a background color of black, and a transparency of 0.3.

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        width: 200.0,//Set Width
        height: 200.0,//Set high
        color: Color.fromRGBO(0, 0, 0, .3),//Set the color,.3 for transparency, or 0.3 for transparency.
      ),
    );
  }
}

Exercise 3: container margin

• This is a square, custom width and height, 300.0 from the top and 100.0 from the left.

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        margin: EdgeInsets.only(top: 300.0,left: 100.0),
        width: 200.0,//Set Width
        height: 200.0,//Set high
        // The color here can be set in the form of words.
        color: Colors.red,
      ),
    );
  }
}

Exercise 4: container's sub-widget s

• When container does not set width and height, the default is to fill the parent widget

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Container'),),
      body: Container(
        color: Colors.red,
      )
    );
  }
}

• When a widget with width and height is set to the container, the size of the container is the same as that of the sub-container.

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Container'),
        ),
        body: Container(
          color: Colors.red,
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Color.fromRGBO(0, 0, 0, .2), //Set a transparent background to make it easy to see the parent container
          ),
        ));
  }
}

• When the width of the parent container is set, the width of the child container will fail.

import 'package:flutter/material.dart';

class Teach extends StatefulWidget {
  @override
  _TeachState createState() => _TeachState();
}

class _TeachState extends State<Teach> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Container'),
        ),
        body: Container(
          width: 400.0,
          height: 400.0,
          color: Colors.red,
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Color.fromRGBO(0, 0, 0, .5), //Set a transparent background to make it easy to see the parent container
          ),
        ));
  }
}