How to center the title of an appbar

Question

I'm trying to center the title text in an app bar that has both a leading and trailing actions.

@override
Widget build(BuildContext context) {
  final menuButton = new PopupMenuButton<int>(
    onSelected: (int i) {},
    itemBuilder: (BuildContext ctx) {},
    child: new Icon(
      Icons.dashboard,
    ),
  );

  return new Scaffold(
    appBar: new AppBar(
      // Here we take the value from the MyHomePage object that
      // was created by the App.build method, and use it to set
      // our appbar title.
      title: new Text(widget.title, textAlign: TextAlign.center),
      leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
      ),
      actions: [
        menuButton,
      ],
    ),
    body: new Center(
      child: new Text(
        'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

This works well except the title is aligned on the left as is shown in this picture:

As I try to include the title in the center, it appears that it's too much to the left:

@override
Widget build(BuildContext context) {
  final menuButton = new PopupMenuButton<int>(
    onSelected: (int i) {},
    itemBuilder: (BuildContext ctx) {},
    child: new Icon(
      Icons.dashboard,
    ),
  );

  return new Scaffold(
    appBar: new AppBar(
      // Here we take the value from the MyHomePage object that
      // was created by the App.build method, and use it to set
      // our appbar title.
      title: new Center(child: new Text(widget.title, textAlign: TextAlign.center)),
      leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
      ),
      actions: [
        menuButton,
      ],
    ),
    body: new Center(
      child: new Text(
        'Button tapped $_counter time${ _counter == 1 ? '' : 's' }.',
      ),
    ),
    floatingActionButton: new FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: new Icon(Icons.add),
    ), // This trailing comma makes auto-formatting nicer for build methods.
  );
}

I would love a solution to get the title text centered perfectly between the 2 icons.

Shields

Answer 1

Centering the title is the default on iOS. On Android, the AppBar's title defaults to left-aligned, but you can override it by passing centerTitle: true as an argument to the AppBar constructor.

Example:

AppBar(
  centerTitle: true, // this is all you need
  ...
)

Frederiksen

in this case title appears not exactly at the center :/ – Corposant

This doesn't even affect the alignment of the title for me. – Mellifluent

@MichaelTolsma, you should remove any Center widget-like in the title property if you want it to be applied. – Cilka

Answer 2

I had the same problem and it finally worked when I added the
mainAxisSize: MainAxisSize.min to my Row() widget:

 return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that
        // was created by the App.build method, and use it to set
        // our appbar title.
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              widget.title,
            ),
          ],
        ),

        leading: new IconButton(
          icon: new Icon(Icons.accessibility),
          onPressed: () {},
        ),
        actions: [
          menuButton,
        ],
      ),
    );
  }

Slipknot

Answer 3

In my case I wanted to have a logo / image centered instead of a text. In this case, centerTitle is not enough (not sure why, I have an svg file, maybe that's the reason... ), so for example, this:

appBar: AppBar(centerTitle: true, title: AppImages.logoSvg)

will not really center the image (plus the image can be too big, etc.). What works well for me is a code like this:

appBar: AppBar(centerTitle: true,
    title: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 35, maxWidth: 200),
        child: AppImages.logoSvg)),

Philender

The accepted answer works for Text but this is the right answer for custom Widgets. Thanks! – Sinner

Worked for me! It seems that centerTitle not work properly when there are actions on the toolbar. This one fixed it. – Doorplate

Has no other effect for me than the more simple solution. In my case, having transparent border space around the image lead to incorrect placement. Simply cutting the image a bit tighter made the simple solution work. – Broddie

Answer 4

You can just use the centerTitle property in the appBar section to center your title using:

centerTitle: true

Rackrent

Simple Spell but quite unbreakable – Lutes

Answer 5

Here is how I make centerTitle on my appbar:

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: new AppBar(
    centerTitle: true ,
    title: new Text("Login"),
  ),
  body: new Container(
    padding: EdgeInsets.all(18.0),
      key: formkey,
        child: ListView(
        children: buildInputs() + buildSubmitButton(),
      ),
   ) 
);
}

Trillium

Answer 6

appbar:AppBar(
centerTitle: true,
title:Text("HELLO")
)

Antecedents

Answer 7

Here is a different approach if you want to create a custom app bar title. For example you want an image and a text at the center of app bar then add

appBar: AppBar(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                Icons.your_app_icon,
                color: Colors.green[500],
              ),
              Container(
                  padding: const EdgeInsets.all(8.0), child: Text('YourAppTitle'))
            ],

          ),
  )

Here we have created a Row with MainAxisAlignment.center to center the children. Then we have added two children - An Icon and a Container with text. I wrapped Text widget in the Container to add the necessary padding.

Haase

Answer 8

Try the following code:

AppBar(
  centerTitle: true,
  …
),

Humanism

Answer 9

You can center the title of an appBar by using centerTitle parameter.

centerTitle is Boolean Datatype, and default value is False.

centerTitle : true

Example :

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Title'),
          backgroundColor: Colors.red,
          centerTitle: true,
        ),
      ),
    ),
  );
}

Toinette

Answer 10

appBar has its own bool condition for title center show or not,

so, if you set true,

  appBar: AppBar(
    title: Text(
      "header Text",
      style: TextStyle(color: Colors.black),
    ),
    centerTitle: true,
  ),

then it will be centre,other then its default left align (in android) ios set center(in default).

Alee

Answer 11

Yeah but in my case i used centertitle as well as axis alignment then it made it centre , if i am using only onw of it then it is is not making it centre , here is how i am doing it :

import 'package:flutter/material.dart';
import 'package:infintywalls/widgets/widget.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            appName(),
          ],
        ),
        elevation: 0.0,
        centerTitle: true,
      ),
    );
  }
}

and yeah btw appName() is my custom widget not a default builtin one.

home this is helpful to you thanks

Peoples

you don't need an extra Row() widget for doing this, you will only need to set centerTitle as true – Janusfaced

Answer 12

It can be done by using Center class.

appBar: AppBar(
  title: const Center(
    child: Text("I Am Rich"),
  ),
),

Betancourt

Answer 13

After trying many solutions this helped me centerTitle: true adding sample code in addition to @Collin Jackson answer

Example in build(BuildContext context)

do this

appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),centerTitle: true
      ),

Poulin

It's been a while, this did solve the issue. Very simple. Thank you. – Actium

Answer 14

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Title'),
            actions: <Widget> [
               IconButton(icon: const Icon(Icons.file_upload), onPressed: _pressed),
            ],
            leading: IconButton(icon: const Icon(Icons.list), onPressed: _pressed),
            centerTitle: true,
        )
        body: Text("Content"),
    );
}

Epileptic

Answer 15

This can help in making Appbar Title Text in Center. You can choose to add your desired Styles using Style or comment it if not needed.

appBar: AppBar(
          title:  const Center(
            child: Text(
              "App Title",
              style: TextStyle( color: Colors.white,fontSize: 20),
            ),
          ),
        ),

On App Display:

Tubbs

Answer 16

It my case this code works:-

appBar: AppBar(

    centerTitle: true,

    elevation: 2,

    title: Center(

      child: Row(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          Container(

            child: Text("  TINKLE"),

          )

        ],

      ),

    ),
    
  ),

Hope this was helpful.

Wiencke

Answer 17

AppBar( centerTitle: true, // this is all you need ... ) it is OK with me,, using:centerTitle: true

Constance

Answer 18

if you are using SliverAppBar and FlexibleSpaceBar widgets, you can use like this. This worked for me especially fixes the problem in android in last version of flutter sdk. These title padding and center tile, both worked in expanded and collapsed mode.

FlexibleSpaceBar(
centerTitle: true,
titlePadding: EdgeInsets.only(bottom:10),
title: _buildHeader(imagePath, strTitle, context),
background: Container(),)

Ossifrage

Why is this happening? I just updated Flutter SDK to 3.19 and my title within the flexible space bar was not centered anymore... my tabs were also misplaced. – Lacee

It is android problem. I also fixed this with center true. But still has some problem – Ossifrage

Answer 19

Use Center object

    appBar: AppBar(
      title: Center(
        child: const Text('Title Centered')
      )
    )

Peart

It doesn't work, because it is not supposed to be like that. – Infelicity