Flutter – How to center the title of an appbar

Flutter aligning the title into the center of an appbar is very easy. By default, the title text is aligned left side of the screen in the android and web platform.

In this tutorial, we align the title in the center of an appbar in a flutter app.

To make the title in the center of an appbar, use centerTitle:true property in the appbar widget.

appBar: AppBar(
        centerTitle: true,
        title: Text("Center Title"),
      ),

Method 1: Using centerTitle property

The recommended method is using the centerTitle:true property. Example,

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Center Title Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("Center Title"),
        ),
        body: Center(child: Text("Center Title Demo")),
      ),
    );
  }
}

Method 2: Using the Center Widget

Using the center widget is another method of aligning the title into the center. Wrap your Text widget as Center Widget. For Example,

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Center Title Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Center(child: Text("Center Title")),
        ),
        body: Center(child: Text("Center Title Demo")),
      ),
    );
  }
}

Both methods can same output like this,