Please explain like I'm 5: What is the purpose of MainAxisSize in Flutter?

user_13779048 0
Viewed 1640

I'm quite seeing the effect of MainAxisSize but I don't understand its purpose. Please explain like I'm 5. Thank you.

For further reference:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xffEDE7F6),
        body: SafeArea(
          child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
            Container(
              height: 100,
              width: 100,
              color: Color(0xff9575CD),
              child: Text('Container 1'),
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.black45,
              child: Text('Container 2'),
            ),
            Container(
              height: 100,
              width: 100,
              color: Colors.black12,
              child: Text('Container 3'),
            ),
          ]),
        ),
      ),
    );
  }
}

Output on emulator:

enter image description here

dart flutter android
1 Answers

Let's say you have a container of height 400 wrapped around a column containing 3 rows of height 100 (either defined by height or intrinsic by what is in there), that leaves you 100pt of height unused.

MainAxisSize.max says, distribute all space between the column's items, so create spaces of 50 between the rows.

MainAxisSize.min says, squeeze the rows together and leave unused space (100) at the end (or beginning or both ends depending on alignment)

user_136482050
Related