How to center the title of an appbar

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.

18 Answers

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

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

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

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

centerTitle: true 

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

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

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.

Try the following code:

AppBar( centerTitle: true, … ), 

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

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

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

It can be done by using Center class.

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

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

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

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:

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.

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

Use Center object

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