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.

Solution 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
  ...
)

Solution 2

I had the same problem and it finally worked when I added the
mainAxisSize: MainAxisSize.min to my Row widget. I hope this helps!

 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,
        ],
      ),
    );
  }

Solution 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)),

Solution 4

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(),
      ),
   ) 
);
}

Solution 5

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

View more solutions

Comments

[Admin]

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

[sebastianf182]

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

[Ravimaran]

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

[Michael Tolsma]

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

[Moti Bartov]

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

[rgisi]

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.

[DaniyalAhmadSE]

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

[dilshan]

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