Spacer

Initial state

• Set three buttons in order
• Add a row of Spacer() between the two AB buttons
• Add a row of Spacer() between the two BC buttons

summary

Spacer() is equivalent to the effect of spring, which maximizes the distance between two controls. (the effect is only effective when the page is not slidable)

Flex

Flex is the parent component of Row and Column. Flex components can list sub components along the horizontal or vertical direction. If you know the spindle direction, it is more convenient to use Row or Column, because Row and Column inherit from flex and their parameters are basically the same, so Row or Column can be used where flex can be used. Flex itself is very powerful. It can also cooperate with Expanded components to realize flexible layout.

Expanded

You can scale out the space occupied by Row, Column, and Flex subcomponents.

const Expanded({
  int flex = 1, 
  @required Widget child,
})

The flex parameter is the elasticity coefficient. If it is 0 or null, the child is inelastic, that is, it will not be occupied by expansion. If it is greater than 0, all Expanded divide all the free space of the spindle according to its flex ratio.

Arrange A, space occupying blank, B and C in the ratio of 1:1:2:2

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: RaisedButton(
                color: Colors.yellow,
                splashColor: Colors.green,
                onPressed: () {},
                child: Text("A"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
            Spacer(
              //The function of Spacer is to occupy a specified proportion of space
              flex: 1,
            ),
            Expanded(
              flex: 2,
              child: RaisedButton(
                color: Colors.green,
                splashColor: Colors.green,
                onPressed: () {},
                child: Text("B"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
            Expanded(
              flex: 2,
              child: RaisedButton(
                color: Colors.blue,
                splashColor: Colors.blue,
                onPressed: () {},
                child: Text("C"),
                textColor: Color(0xffFfffff),
                padding: EdgeInsets.all(8),
                elevation: 5,
                highlightColor: Color(0xffF88B0A),
              ),
            ),
          ],
        ),
      ),

Flexible

Flexible is a component that controls the layout of sub components such as Row, Column and Flex.

The Flexible component enables sub components such as Row, Column and Flex to fill available space in the spindle direction (for example, Row is in the horizontal direction and Column is in the vertical direction). However, unlike the Expanded component, it does not force sub components to fill available space.

The three control as like as two peas, flex and Flexible, is the 1 control on the left. Third controls on the right are Expanded (the other attributes are the same).

It can be seen that:

Row, Column and Flex will be Expanded to fill the available space of the spindle

Flexible does not force subcomponents to fill the available space. The actual size of the subcomponent is what it is

Particular attention

Expanded and Flexible are only used in Row and Column components.

The parentdatawidget Expanded (Flex: 1) wants to apply parentdata of type fly

Padding

Padding can accommodate a sub component. Add its own inner margin to limit the occupation of child components. The core attribute is padding

Container(
                color: Colors.red,
                width: 200,
                height: 150,
                child: Padding(
                  padding: EdgeInsets.all(20),
                  child: RaisedButton(
                    color: Colors.blue,
                    splashColor: Colors.blue,
                    onPressed: () {},
                    child: Text("C"),
                    textColor: Color(0xffFfffff),
                    padding: EdgeInsets.all(8),
                    elevation: 5,
                    highlightColor: Color(0xffF88B0A),
                  ),
                ),
              ),

About Padding and Expanded

• Visual elements with fixed spacing can be packaged by Padding
• For visual elements with variable size, you can use the Expanded control to fill the empty area of the parent container