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 mainAxisAlignment
, including:
MainAxisAlignment.center
MainAxisAlignment.spaceEvenly
MainAxisAlignment.end
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.
Instructions
Add an alignment type of your choice to the Column. Run the application using different alignments to see their effect!
Hint
Add a mainAxisAlignment
attribute to the Column. Some of the possible values include:
MainAxisAlignment.center
MainAxisAlignment.spaceEvenly
MainAxisAlignment.end
Solution
The runApp
call should look something like:
runApp(MaterialApp( home: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: const [icon1, icon2, icon3] ) ) ));