Learn

The Align widget is another single-child layout widget that is a more flexible alternative to Center. It allows a widget to be aligned in a variety of ways using an alignment property.

The Align widget uses the following syntax:

Align(
    alignment: Alignment.type,
    child: Widget,
 )

The alignment parameter enables us to specify how we want the child widget aligned. Flutter provides us with the following constants including:

Alignment.topLeft
Alignment.centerRight
Alignment.bottomCenter
Alignment.bottomRight
And more!

The child parameter enables us to specify the child widget that requires alignment. For example:

Align(
  alignment: Alignment.topRight,
  child: Text("In the top right")
)

Let’s edit our code and replace the Center widget with an Align widget.

Instructions

Replace the Center widget with an Alignment of any type. Try changing to a variety of types! Check out the Align widget documentation for all of the options.

Press the blue Run button to see the result.

Hint

Change the word Center to Align and give the widget an alignment property with a type from the Alignment class.

Solution

The inside of main should look something like:

runApp(
  const MaterialApp(
    home: Scaffold(
      body: Align(
        alignment: Alignment.bottomCenter,
        child: Icon(
          Icons.center_focus_strong,
          color: Colors.red,
          size: 100.0,
        )
      )
    )
  )
);

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?