[Flutter] Change the start position of a specific widget in the Column

Overview

When placing a widget in a Column in Flutter, you can set the left or right position to start with the crossAxisAligment property.

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Text1',
      style: TextStyle(
        fontSize: 20
      ),
    ),
    Text('Text2',
      style: TextStyle(
          fontSize: 20
      ),
    ),
    RaisedButton(
      onPressed: (){setState(() {});},
      child: Text('Button')
    )
  ],
)

So what if you want to change the starting position for a particular widget?

Since there is no choice but to set the Column property at once, we will process each Widget that we want to change individually.

Solution 1: crossAxisAligment: start and wrap the widget you want to center in Center

If you want most widgets to be left-aligned and only one centered, you can put that much in Center ().

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text('Text1',
      style: TextStyle(
        fontSize: 20
      ),
    ),
    Center(
      child: Text('Text2',
        style: TextStyle(
            fontSize: 20
        ),
      ),
    ),
    RaisedButton(
      onPressed: (){setState(() {});},
      child: Text('Button')
    )
  ],
)

Solution 2: Set crossAxisAlignment: center and put the widget you want to place on the left in Row and set mainAxisAligment: start

If many widgets are centered, it would be annoying to wrap them in the Center one by one. In that case, put the widget you want to put on the left in the Row. The start position in the Row can be set with the Row's mainAxisAlignment property.

child: Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Text('Text1',
      style: TextStyle(
        fontSize: 20
      ),
    ),
    Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text('Text2',
          style: TextStyle(
            fontSize: 20
          ),
        ),
      ]
    ),
    RaisedButton(
      onPressed: (){setState(() {});},
      child: Text('Button')
    )
  ],
),

Lastly

Maybe there are many other things I can do. It looks like a puzzle ...