Learn

We often will want to have our content centered, appearing in the middle of its parent element. The Center widget is a single-child layout widget made for this purpose. The Center widget makes a child widget appear in the center of its available area.

The Center widget uses the following syntax:

Center(
    child: Widget
)

The child property allows us to specify the child widget we want to center. The Center widget is a single-child widget so only one Widget can go here.

Let’s look at an example centering a Text widget:

  Center (
    child: Text(
      'Hello, world!'
    )
  )

Notice that the Text widget has been added as an argument to the Center widget. It is surrounded by the parentheses of the Center widget.

Let’s try it out.

Instructions

Change the code in the workspace to center the Icon.

Hint

Make the Icon widget the child of a Center widget.

Solution

The inside of main should look like:

runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          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?