How to Center Align App Bar Title in Flutter?

The centerTitle property of the Appbar determines whether the title should be center aligned within the app bar or not. It is a boolean property which can be set to true or false.

By default, the centerTitle property is set to false, therefore, the title is aligned to the left of the app bar. So, if you want to center align the app bar title in a Flutter application, you have to set the centerTitle property of the app bar to true.

The below code sample shows how you can use the centerTitle property in the app bar to center align its title:

appBar: AppBar(
  centerTitle: true, // <--- Center the title
  title: const Text('Center Aligned Title'),
),

You can see the full implementation in the following Flutter example:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Center Title Demo App',
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true, // <--- Center the title
          title: const Text('Center Aligned Title'),
        ),
        body: Container(),
      ),
    );
  }
}

Output:

Method 2: Using the Center Widget

You can also use the Center widget to center align the app bar title. The Center widget centers its child widget within itself.

If you wrap the title text of the app bar within the Center widget, it will automatically pull the title to the center of the app bar.

See the following sample code example:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Center Title Demo App',
      home: Scaffold(
        appBar: AppBar(
          title: const Center(
            child: Text('Center Aligned Title'),
          ),
        ),
        body: Container(),
      ),
    );
  }
}

Output:

Method 3: Using the Container Widget

You can also wrap the app bar title in the Container widget and then use its alignment property to center align the app bar title.

Simply set the alignment property of the Container to Alignment.center and the app bar title will be pulled to the center of the app bar automatically.

See the implementation in the below example:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Center Title Demo App',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink,
          title: Container(
            alignment: Alignment.center,   // Center align
            child: const Text('Center Aligned Title'),
          ),
        ),
        body: Container(),
      ),
    );
  }
}

Output:

Conclusion

In this article, we learned how we can center align the app bar title in Flutter.

In summary, there are three ways to center align the app bar title in Flutter:

• By setting the centerTitle property of the AppBar widget to true
• By wrapping the app bar title within the Center widget
• By wrapping the app bar title within the Container widget and setting the alignment property to Alignment.center

You can use any approach that you like.

Thanks for reading.