How to center the app bar title
I am trying to center the title text in an app bar that has both 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 to the left, as shown in this figure:
As I try to include the title in the center, it seems like 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 have liked the solution to get the title text perfectly positioned between the two icons. Many thanks,
source to share
Centering the title by default on iOS. On Android, the title AppBar
is left-aligned by default, but you can override it by passing it centerTitle: true
as an argument to the constructor AppBar
.
Example:
AppBar(
centerTitle: true, // this is all you need
...
)
source to share
This is how I do centerTitle in my app bar:
@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(),
),
)
);
}
source to share
I had the same problem and it finally worked when I added
mainAxisSize: MainAxisSize.min to my Row widget. 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,
],
),
);
}
source to share
@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"),
);
}
source to share
After many tries, it helped me centerTitle: true
add some code example in addition to @Collin Jackson answer
Example
inbuild(BuildContext context)
do it
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
),
source to share
Here's another approach if you want to create your own app bar title. For example, you want an image and text in the center of the 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 Line with MainAxisAlignment.center to center the children. Then we added two children - an icon and a containerwith text. I have wrapped the text widget in a container to add the required padding.
Hope it helps.
source to share