Skip to content
DeveloperMemos
Contact

Centering the AppBar Title in Flutter

— Flutter, AppBar, UI Design — 1 min read

In Flutter, achieving a perfectly centered title in the AppBar can be tricky, especially when there are leading and trailing icons. This guide will demonstrate how to center the AppBar title in Flutter.

Default Behavior

Flutter's AppBar widget has different default title alignments based on the platform:

  • iOS: The title is centered by default.
  • Android: The title is left-aligned by default.

Centering the Title

For Android

On Android, you can center the title by setting centerTitle to true in the AppBar constructor.

1AppBar(
2  centerTitle: true, // This centers the title
3  title: Text('Your AppBar Title'),
4  leading: IconButton(
5    icon: Icon(Icons.menu),
6    onPressed: () {},
7  ),
8  actions: <Widget>[
9    IconButton(
10      icon: Icon(Icons.search),
11      onPressed: () {},
12    ),
13  ],
14)
Astro(ASO Tool)

If you're looking to increase your app's visibility, Astro is the tool for you. You can track your app's keyword rankings for multiple countries all at the same time. I've been using it for a few months now and it's been a game-changer for me. I highly recommend it! 🚀

We earn a commission if you make a purchase, at no additional cost to you.

Dealing with Asymmetry

When you have different numbers of widgets in leading and trailing positions, the title might appear off-center. To handle this, you can use a combination of centerTitle and placeholders.

Example with Placeholder:

1AppBar(
2  centerTitle: true,
3  title: Text('Your AppBar Title'),
4  leading: IconButton(
5    icon: Icon(Icons.menu),
6    onPressed: () {},
7  ),
8  actions: <Widget>[
9    IconButton(
10      icon: Icon(Icons.search),
11      onPressed: () {},
12    ),
13    Opacity(
14      opacity: 0,
15      child: IconButton(
16        icon: Icon(Icons.menu),
17        onPressed: () {},
18      ),
19    ),
20  ],
21)

In this example, an invisible (Opacity widget with opacity: 0) IconButton is added as a placeholder to balance the AppBar.