Learn

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] ) ) ));

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?