How to center the title of an appbar - flutter

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.

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

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

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

Answer 4

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

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

Answer 6

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.

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

Try the following code:
AppBar(
centerTitle: true,
…
),

Answer 11

It can be done by using Center class.
appBar: AppBar(
title: const Center(
child: Text("I Am Rich"),
),
),

Answer 12

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

Answer 13

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

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

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:

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.

Answer 17

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