Flutter Column CrossAxisAlignment.center not centering

Viewed 1082

I've been having this issue recently, When Using

    class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          RaisedButton(onPressed: (){}, child: Text('please'),),
          RaisedButton(onPressed: (){}, child: Text('center'),)
        ],
      ),
    );
  }
}

Results in the children widgets aligning to the left

screenshot Any help would be appreciated

3 Answers

This is because Column does not takes all the space available horizontally. You can do it like this :

class _LoginPageState extends State<LoginPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
             SizedBox(width : double.infinity),
              RaisedButton(onPressed: (){}, child: Text('please'),),
              RaisedButton(onPressed: (){}, child: Text('center'),)
            ],
          ),
        );
      }
    }

If you don't need to add extra widgets, just wrap your widget to the Center widget.

 return Scaffold(
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        RaisedButton(onPressed: (){}, child: Text('please'),),
        RaisedButton(onPressed: (){}, child: Text('center'),)
      ],
    ),
  ),
);

But I think you probably need some widgets.

If so, using the container widget.

return Scaffold(
  body: Container(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(onPressed: (){}, child: Text('please'),),
            RaisedButton(onPressed: (){}, child: Text('center'),)
          ],
        ),
      ],
    ),
  ),
);  

For Row:

mainAxisAlignment = Horizontal Axis

crossAxisAlignment = Vertical Axis

For Column:

mainAxisAlignment = Vertical Axis

crossAxisAlignment = Horizontal Axis

When you use a Row, its children are laid out in a row, which is horizontally. So a Row's main axis is horizontal. Using mainAxisAlignment in a Row lets you align the row's children horizontally (e.g. left, right). The cross axis to a Row's main axis is vertical. So using crossAxisAlignment in a Row lets you define, how its children are aligned vertically.

In a Column, it's the opposite. The children of a column are laid out vertically, from top to bottom (per default). So its main axis is vertical. This means, using mainAxisAlignment in a Column aligns its children vertically (e.g. top, bottom) and crossAxisAlignment defines how the children are aligned horizontally in that Column.

Row/Column are associated to an axis:

Horizontal for Row Vertical for Column

mainAxisAlignment is how items are aligned on that axis. crossAxisAlignment is how items are aligned on the other axis.

for more details, you can read hereFlutter crossAxisAlignment vs mainAxisAlignment

I hope its help :)

Related