Shutter control layout

Spacer

The initial state

• Set up three buttons , Sequential arrangement
• stay AB Add a line between the two buttons Spacer()
• stay BC Add a line between the two buttons Spacer()

summary

Spacer() It's the effect of a spring , Maximize the distance between two controls . ( It works only when the page is not slidable )

Flex

Flex yes Row and Column The parent component of . Flex Component can arrange its subcomponents horizontally or vertically , If you know the direction of the spindle , Use Row or Column It will be more convenient , because Row and Column Inherit from Flex, The parameters are basically the same , So you can use Flex Basically, all the places can be used Row or Column.Flex Its function is very powerful , It can also be with Expanded Components cooperate to achieve flexible layout .

Expanded

You can scale “ Expansion ” Row、Column and Flex The space occupied by the subcomponents .

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

flex The parameter is the coefficient of elasticity , If 0 or null, be child There is no flexibility , That is, the space that will not be occupied by expansion . If it is greater than 0, be-all Expanded According to it flex The proportion of the spindle to divide all the free space .

With 1:1:2:2 The proportion of , array A , Space occupying blank , B , C

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(
              //Spacer The function of 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 It's a control Row、Column、Flex How the subcomponents are laid out .

Flexible Components can make Row、Column、Flex And other subassemblies have the ability to fill the available space in the direction of the spindle ( for example ,Row In the horizontal direction ,Column In the vertical direction ), But it's connected to Expanded Different components , It doesn't force subcomponents to fill free space .

Three controls flex All are 1, The third control on the left is Flexible, The third control on the right is Expanded ( Other attributes are as like as two peas )

It can be seen that :

Row、Column、Flex Will be Expanded open , Full of spindle free space .

Flexible It doesn't force subcomponents to fill the available space , What is the actual size of the subcomponent , It's just how big .

Particular attention

Expanded、Flexible Only in Row、Column Components use .

Expanded、Flexible stay “Container、Padding、Stack” An error will be reported in the component : The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type Fle

Padding

Padding It can hold one subcomponent , Add your own inner margin to limit the child's component footprint , 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

• For visual elements with fixed spacing , Can pass Padding Pack it .
• For visual elements of variable size , Can pass Expanded Control to fill the empty area of the parent container