I’m new to flutter, While practising the row and column widget I encountered this problem. It’s said that setting mainAxisAlignment
to center in a flutter column will center the children vertically, Why when I added a row as a children, the column also centers horizontally while the row children does not?
Does anyone know why?
Here is the code
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Exercise row & column"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Text 1"),
Text("Text 2"),
Text("Text 3"),
Row(children: <Widget>[
Text("Text 4"),
Text("Text 5"),
Text("Text 6"),
])
],
),
));
}
Here is the result
2
Answers
This is because the Row widget takes up the entire width and its children are aligned horizontally.
In order to center align the Row Widget‘s children, added a mainAxisAlignment: MainAxisAlignment.center property to the row widget.
your code seems to be good. I tested it and it worked fine, sometimes flutter just holds cache and do not do changes that are clearly visible. try
flutter clean
then re-run the project. it will solve your problem 🙂