Align the left and right ends of the child controls in Row in Flutter (four methods)

The child controls in Row in Flutter are aligned left and right


Suppose we want to achieve such an effect: two sub-controls (for example, two texts) are displayed in one line, but we want them to be aligned on the left and right sides respectively, that is, one on the left and the right. How to achieve it?

Method 1: Set the spaceBetween alignment

Set the mainAxisAlignment property of the Row control:

mainAxisAlignment: MainAxisAlignment.spaceBetween,

Method 2: Expanded filling

Use Expanded to fill the layout space:

new Row(
  children: [
    new Text("开始日期:"),
    Expanded(child: SizedBox()),
    new Text(“2020-12-29"),
  ],),

Method 3: Use Spacer() to fill

new Row(
  children: [
    new Text("开始日期:"),
    Spacer(),
    new Text(“2020-12-29"),
  ],),

Method 4: Use Flexible

new Row(
  children: [
    new Text("开始日期:"),
    Flexible(fit: FlexFit.tight, child: SizedBox()),
    new Text(“2020-12-29"),
  ],),

**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"
**PS: For more exciting content, please check --> "Flutter Development"

Guess you like

Origin blog.csdn.net/u011578734/article/details/111997579