top of page

[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 ...

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Comments


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page