How to center Title in Appbar in flutter : Various Methods

Do you want to center the title in the App bar? In this entire tutorial, you will know how to center the title in the appbar in an easy way.

You can create a Appbar for your app using the flutter AppBar class.

Let’s create a Sample App with the AppBar() widget.

Execute the below lines of code.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
          ),
          body: Center(
            child: Container(
              width: 350.0,
              height: 300.0,
            ),
          )),
    );
  }
}

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

Output

To center the title written on the Appbar widget you have to provide the centerTitle: true, attribute inside the AppBar() widget.

AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
            centerTitle: true,
          ),

Below is the complete code.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Text("My Flutter App"),
            centerTitle: true,
          ),
          body: Center(
            child: Container(
              width: 350.0,
              height: 300.0,
            ),
          )),
    );
  }
}

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

Output

The other way to center the title in the AppBar is the use of Flutter Row() widget. Use the Row() widget for the title attribute. And after that align the children of the Row() to the center using the mainAxisAlignment: MainAxisAlignment.center.

AppBar(
            // The title text which will be shown on the action bar
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("My Flutter App"),
              ],
            ),
          ),

Complete Code

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  // This widget is the root of your application.
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Application name
      title: 'My Flutter App',
      debugShowCheckedModeBanner: false, // Remove debug banner
      home: Scaffold(
          appBar: AppBar(
            // The title text which will be shown on the action bar
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("My Flutter App"),
              ],
            ),
          ),
          body: Center(
            child: Container(
              width: 350.0,
              height: 300.0,
            ),
          )),
    );
  }
}

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

Output

That’s all you have to do to center the title on the AppBar() widget in a flutter. I hope you have liked this tutorial.

If you have any doubt then you can contact us for more help.