Container

Inscription: Don't give up until the last moment. No matter whether the ending is successful or not, as long as you have worked hard and tried your best, you will have a clear conscience.

At present, the Flutter series of tutorials are published for free on the watermelon video, which is updated daily. Welcome to pay attention to receive reminders

【x1】Click to view the tips

[x2] Various series of tutorials

1 Container function

The container used to place the widget, with parameters such as padding, margin, position, size, etc.

• The most used default layout! It can only contain one child:, which supports configurations such as padding, margin, color, width and height, decoration (generally configure borders and shadows), etc.
• In Flutter, not all controls have attributes such as width and height, padding, margin, and color, so there are Widgets such as Padding and Center.

2 alignment: Alignment Alignment

[The picture comes from https://www.jianshu.com/p/a675b4d66a93]

3 padding margin Description

padding: padding
margin: outer margin

The value type of padding and margin is EdgeInset;

EdgeInset is used to describe boundary values ​​and can be created as follows:

• EdgeInsets.fromLTRB(10,10,10,10) , L represents the left margin (left abbreviation), T represents the top margin (top abbreviation), R represents the right margin (right abbreviation), B represents the bottom margin (bottom abbreviation), Four values ​​can be written separately;

• EdgeInsets.all (10), the top, bottom, left, and right margins are both 10;

• EdgeInsets.only(left: 10, right: 5, top: 10, bottom: 10), the margin values ​​in 4 directions can be specified respectively. If only the top margin is needed, it can be written as EdgeInsets.only( top: 10);

• EdgeInsets.symmetric(vertical: 20, horizontal: 10) , you can specify the vertical and horizontal margins, or you can specify the vertical or horizontal margins separately. If only vertical margins are needed, it can be written as EdgeInsets.symmetric(vertical: 20);

• EdgeInsets.fromWindowPadding(), creates insets that match the given window padding. The specific usage is not yet known. The first parameter is the windowpadding of the given widget, and the second is the resolution of the screen.

Set the effect of the black mask

var testContainer =  new  Container ( 
    // color and decoration cannot be set at the same time 
    //color: Colors.white, 
    // maring 
    margin : EdgeInsets .all ( 10.0 ) , height 
    : 120.0 , width 
    : 500.0 , // transparent black mask 
    decoration : new BoxDecoration ( /// 4.0 radians 
        borderRadius : BorderRadius . all ( Radius . circular ( 4.0 )  
      
        ) , 
        //If the color of decoration is set, the color of Container cannot be set. 
        color : Colors . black , 
        ///border 
        border :  new  Border . all ( color : Colors . red , width :  0.3 ) ) , 
    child :  new  Text ( "666666" ) ) ;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

Set the effect of the background color

var testColorContainer =  new  Container ( 
  // color and decoration cannot be set at the same time 
  color : Colors . white , 
  // 
  margin : EdgeInsets . all ( 10.0 ) , 
  // 
  padding : EdgeInsets . all ( 10.0 ) , 
  height :  120.0 , 
  width :  500.0 , 
  child :  new  Text ( "666666" ) , 
);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

The effect of not setting padding

Set the effect of padding

[1] At present, the Flutter series of tutorials are published for free on the watermelon video, which is updated daily. Welcome to pay attention to receive reminders and click to view the tips

[2] This official account will publish a series of special articles for the first time, and paid video courses will be published in the official account for free. On your way to work or just before going to bed, this official account is a small choice for you to browse knowledge and dry goods. , Collection is not as good as action, at that moment, the official account will remind you that it is time to learn.