Fluent development: setting method of left and right alignment of child controls in row

Preface

stay Flutter Development process , about UI Interface layout operation is also a very important skill , Especially according to the equal proportion of actual business needs 、 Bisection display 、 Symmetrical display 、 Align both ends and so on , These are common operations , Then this article will share the settings about the alignment of both ends , For developers who are not familiar with the layout, you can have a good look , This article takes Row The left and right alignment of child controls in , Easy to read and use .

About Row There are four ways to set the left and right alignment of child controls in , For the need to align the left and right ends of the same line , Easy to implement , And there are four implementation methods ： By setting spaceBetween Alignment mode 、 By using Expanded fill style 、 By using Spacer() fill style 、 By using Flexible The way , The specific four methods are as follows .

Method 1 ： By setting spaceBetween Alignment mode

By setting spaceBetween Align the left and right ends , It's mainly about setting up Row Properties of control mainAxisAlignment: MainAxisAlignment.spaceBetween, To set up . Specific examples are as follows ：

Row(

  mainAxisAlignment: MainAxisAlignment.spaceBetween,

  children: [

    new Text("left"),

    new Text("right"),

  ]

);