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

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

Or sign up using:

Already have an account?