Why Row is not horizantally center inside a Column

user_9209825 0
Viewed 53

As we know by default,Column horizontally center its children if it has full width.But when i placed two cards and one row inside a column,two cards are placed horizontally center by flutter but row remains same at its start position? Why?
I think row should be horizontally center because it is a child of Column in my case but it's not.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Container(
        color: Colors.purple,
        height: double.infinity,
        child: Column(
          //  mainAxisAlignment: MainAxisAlignment.center,
          //  crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card(
              child: Text(
                'Chart',
                style: TextStyle(fontSize: 20.0),
              ),
              elevation: 5,
              color: Colors.blue,
            ),
            Card(
              child: Text(
                'list of tx',
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
              color: Colors.purple,
            ),
            Row(
              children: [
                Text('this is row'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

output of this code

flutter-layout flutter
3 Answers

By default mainAxisSize property is MainAxisSize.max in Row widget, What you have to do is just change it to MainAxisSize.min, To Affect by the parent widget, who in this example is the Column

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)
user_104983740

Try to pass mainAxisAlignment argument to your Row . For example

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

This will make children of the Row to be Centered.

user_78575410

This is happening because by default, Row will take the whole horizontal space. You can fix it by telling it to take as little space as possible:

Row(
    mainAxisSize: MainAxisSize.min,
    ...
)

Setting the mainAxisAlignment of Row to MainAxisAlignment.center will work only if there is one widget inside the Row. It only tells its children to go the center.

user_95227320
Related