Often we will want to change the way our content within a Row or Column is displayed. We might want everything shifted to the left, the right, or spread out. Flutter makes this simple to do.
Both Row and Column widgets have a
mainAxisAlignment property. For Rows, this controls how the items take up the horizontal space. For columns, it controls the vertical space.
Flutter provides us with constants for
We can set the
mainAxisAlignment for a Row or Column by adding it as an attribute:
Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: const [ Text( 'Hello', ), Text( 'World!', ) ], )
Let’s try it out.
Add an alignment type of your choice to the Column. Run the application using different alignments to see their effect!
mainAxisAlignment attribute to the Column. Some of the possible values include:
runApp call should look something like:
runApp(MaterialApp( home: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: const [icon1, icon2, icon3] ) ) ));