The Center widget

Learn to center a child with Center.

The Center widget

Center is a widget that places its single child in the exact middle of its parent. Center is actually a shortcut for using the Align widget with alignment: Alignment.center. The child is centered both horizontally and vertically.

Center(
  child: Text('Ortada'),
)

// Equivalent:
Align(
  alignment: Alignment.center,
  child: Text('Ortada'),
)

Center and alignment

Center places the child in the exact middle of the parent's area. If the parent gives unbounded size (e.g. inside a Column with mainAxisSize: min), Center centers the child only within its own size. Center has no alignment parameter; it is designed for dead center. For different alignments, use Align.

Scaffold(
  body: Center(
    child: Container(
      width: 100,
      height: 100,
      color: Colors.red,
      child: Text('Ortada'),
    ),
  ),
)

Exercise Print Center info

In main, print two lines with print: center ortala and align kisa yol.

Show example solution

void main() {
  print('center ortala');
  print('align kisa yol');
}

Test yourself

What does the Center widget do?
- Rotates the child
- Places the child in the middle of the parent
- Hides the child
- Sizes the child
Show answer

Places the child in the middle of the parent — Center places the child in the exact middle of its parent; it centers both horizontally and vertically.

Center the child

Widget build(BuildContext context) {
  return ____(
    child: Text('Ortada'),
  );
}

Show answer

Widget build(BuildContext context) {
  return Center(
    child: Text('Ortada'),
  );
}

Center concepts

Center

Centers the child
alignment

Alignment info
Alignment.center

Center's default value
Center = Align

Center is a shortcut for Align

Next lesson: SizedBox.expand

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies