Flutter – How to Center Align Title of your Application?

Center Align the AppBar Title in Flutter

A Flutter application commonly displays its screen title through the title property of an AppBar. To place that title in the horizontal center of the app bar, you can wrap the Text widget in a Center widget.

The following snippet shows the basic structure:

title: Center(
	child: Text('Flutter Tutorial'),
)

The Center widget expands to the space available to the app-bar title area and positions its child at the center of that space.

Flutter Example with a Centered AppBar Title

In the following Flutter application, the app-bar title is wrapped in a Center widget. The body also uses a separate Center widget to position the “Hello World!” text in the middle of the screen.

lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('Flutter Tutorial'),
          ),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Screenshot

Center the Flutter AppBar Title with centerTitle

Flutter also provides the centerTitle property directly on AppBar. This is usually the clearer option when your only requirement is to center the title.

appBar: AppBar(
  centerTitle: true,
  title: const Text('Flutter Tutorial'),
),

Setting centerTitle to true explicitly requests a centered title and avoids adding an extra layout widget. It also makes the purpose of the code immediately clear.

Centered AppBar Title with Leading and Action Widgets

An app bar may contain a back button, navigation icon, or action buttons. Wrapping the title in Center centers it within the title widget’s available area, but the result may not always appear centered relative to the entire screen when the leading and action areas have different widths.

For a standard Material app bar, prefer centerTitle: true and test the layout with the actual leading and action widgets used by the screen.

appBar: AppBar(
  centerTitle: true,
  title: const Text('Profile'),
  actions: [
    IconButton(
      icon: const Icon(Icons.settings),
      onPressed: () {},
    ),
  ],
),

Center Multi-Line Flutter AppBar Title Text

The centerTitle property controls the position of the title widget. It does not control how text is aligned inside a multi-line Text widget. Add textAlign: TextAlign.center when the title itself can wrap onto more than one line.

appBar: AppBar(
  centerTitle: true,
  title: const Text(
    'Flutter Application Title',
    textAlign: TextAlign.center,
  ),
),

Center Widget versus centerTitle in Flutter

Method	When to use it
centerTitle: true	Use this for the usual requirement of centering an AppBar title.
Center(child: Text(...))	Use this when the title area contains a custom widget that needs additional layout control.
textAlign: TextAlign.center	Use this to center the text inside a title widget, especially when the text spans multiple lines.

Common Flutter AppBar Title Alignment Issues

• The title still appears off-center: Check whether the app bar has a leading widget or several action buttons. Unequal space on the two sides can affect the visual balance.
• The text is centered but clipped: Use a shorter title, adjust the text style, or allow suitable overflow behavior for the available width.
• Only Android or iOS looks centered: Set centerTitle explicitly instead of relying on platform-dependent defaults.
• A multi-line title is not internally centered: Add textAlign: TextAlign.center to the Text widget.

Flutter AppBar Title Centering FAQs

How do I center an AppBar title in Flutter?

Set centerTitle: true in the AppBar. You can also wrap the title widget in Center, although centerTitle is generally more direct for a standard app-bar title.

Why is the Flutter AppBar title not centered by default?

The default title alignment can depend on the active Material design behavior and platform conventions. Set centerTitle explicitly when the title must remain centered consistently.

Does TextAlign.center center the AppBar title?

No. TextAlign.center aligns text within the bounds of the Text widget. Use centerTitle: true to position the title widget in the center of the app bar.

Can I center an AppBar title that contains an image or Row?

Yes. The title property accepts any widget. You can assign an image, Row, or another custom widget and use centerTitle: true. Keep the custom title compact enough to fit between the leading and action areas.

Flutter Centered AppBar Title Summary

To center the title of a Flutter application screen, set centerTitle: true on the AppBar. Wrapping the title in a Center widget also works and can be useful for custom title layouts. For multi-line titles, use textAlign: TextAlign.center in addition to centering the title widget.

In this Flutter Tutorial, we learned how to center align title of your Flutter Application using Center widget.