This is a problem I encountered when watching a tutorial for Flutter. So let us say we have a column, and then inside the column one of the children is a row which also has children. Then for an unknown reason the children of the column which are not a row becomes centered horizontally. In this case the mainAxisAlignment is set to MainAxisAlignment.center. Now the tutorial presents an elegant solution to make the non-row children be at the same alignment as the children of column that is a row, that is to set the crossAxisAlignment to CrossAxisAlignment.start.
I simply want to know why this phenomenon happens. Is it perhaps because by inserting a row, it programatically sets the crossAxisAlignment of the column to CrossAxisAlignment.center? I don't see how the code can logically act like that though. The code is below.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Aplikasi Hello World"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Text 1'),
Text('Text 2'),
Text('Text 3'),
Row(
children: <Widget>[
Text('Text 4'),
Text('Text 5'),
Text('Text 6')
],
)
],
)));
}
}