Flutter - Using Center Widget Examples

This tutorial explains what is the Center widget in Flutter and how to use it.

In Flutter, if you need to center a widget both horizontally and vertically, you can wrap the widget to be centered with a Center widget. In this tutorial, I am going to explain how the Center widget works.

Using Center Widget

Below is the constructor of the Center widget.

  Center({
    Key? key,
    double? widthFactor,
    double? heightFactor,
    Widget? child
  })

The constructor doesn't have any required argument. For the basic usage, you only need to pass the child argument which is the widget to be centered. The widthFactor and heightFactor arguments are going to be explained later.

Without those factor arguments, Flutter will set the size of the Center widget according to the constraints that it has. Then, the child widget will be placed right in the middle.

Below is an example where the parent widget fills the entire screen.

  Center(
    child: Container(
      color: Colors.teal,
      width: 100,
      height: 100,
    ),
  )

Output:

Below is another example where the parent widget has explicit size constraints.

  Padding(
    padding: const EdgeInsets.all(10),
    child: Container(
      color: Colors.yellow,
      constraints: const BoxConstraints(
        maxWidth: 300,
        maxHeight: 300,
      ),
      child: Center(
        child: Container(
          color: Colors.teal,
          width: 100,
          height: 100,
        ),
      ),
    ),
  )

Output:

Set Width & Height Factor

Flutter also provides widthFactor and heightFactor arguments. It's optional and you don't need to pass it in most cases. Nevertheless, I am going to explain the effect of those two arguments.

If the widthFactor is passed with a non-null value, the width of the Center widget will be set to the child's width multiplied by the factor. For example, if you set it to 2, the width will be twice the width of the child. It can be useful in cases where you want to align a widget based on its size. The passed value must be a positive number, otherwise you will get an assertion error.

  Padding(
    padding: const EdgeInsets.all(10),
    child: Container(
      color: Colors.yellow,
      constraints: const BoxConstraints(
        maxWidth: 300,
        maxHeight: 300,
      ),
      child: Center(
        widthFactor: 2,
        child: Container(
          color: Colors.teal,
          width: 100,
          height: 100,
        ),
      ),
    ),
  )

Output:

Below is the output of the same code, but the widthFactor is set to 0.5. If it's below 1, the can be part of the widget that's rendered outside its parent.

Output:

The heightFactor has the similar effect. It's used to set the height of the Center widget to the child's height multiplied by the factor. It only accepts positive numbers as well.

  Padding(
    padding: const EdgeInsets.all(10),
    child: Container(
      color: Colors.yellow,
      constraints: const BoxConstraints(
        maxWidth: 300,
        maxHeight: 300,
      ),
      child: Center(
        heightFactor: 1,
        child: Container(
          color: Colors.teal,
          width: 100,
          height: 100,
        ),
      ),
    ),
  )

Output:

Center Parameters

• Key? key: The widget's key, used to control how a widget is replaced with another.
• double? widthFactor: If not null, set the width to the child's width multiplied by this factor.
• double? heightFactor: If not null, set the height to the child's height multiplied by this factor.
• Widget? child: The widget to be centered.

Summary

The center widget can be used if you want to align a widget at the middle both horizontally and vertically. In addition, the widthFactor and heightFactor arguments make it possible to align a widget based on its size. If you need a custom alignment, you can use the Align widget. You can also consider to use Row and Column widgets as they allow you to specify how to align the children.