0
votes

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')
                  ],
                )
              ],
            )));
  }
}