Center Widget Flutter: What It Is and How to Use It

The Center widget in Flutter is a layout widget that centers its child widget both vertically and horizontally within its parent. It is a simple way to position a widget in the middle of the available space.

How It Works

The Center widget acts like a frame that takes all the available space from its parent and places its child widget right in the middle. Imagine you have a picture and you want to hang it exactly in the center of a wall. The Center widget is like the hook that ensures the picture is perfectly centered on the wall.

It does this by expanding to fill the parent’s space and then positioning the child widget at the center point both horizontally and vertically. This means no matter how big or small the parent container is, the child will always stay centered.

Example

This example shows a Text widget centered on the screen using the Center widget.

dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello, Center!'),
        ),
      ),
    );
  }
}

Output

A screen with the text 'Hello, Center!' perfectly centered both vertically and horizontally.

When to Use

Use the Center widget whenever you want to place a widget exactly in the middle of its parent container. This is common for splash screens, loading indicators, or any UI element that should grab the user's attention by being centered.

For example, if you want to show a logo or a button in the middle of the screen, wrapping it with Center is the easiest and cleanest way to do it without manually calculating positions.

Key Points

• Center expands to fill the parent and centers its child.
• It centers both vertically and horizontally by default.
• It is useful for simple, centered layouts without extra positioning code.
• Works well inside flexible layouts like Scaffold or Container.

Key Takeaways

The Center widget places its child in the middle of the available space.

It simplifies layout by avoiding manual alignment calculations.

Use Center for splash screens, loading indicators, or centered buttons.

Center expands to fill its parent and centers child vertically and horizontally.