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.
To center align the title, just wrap the title Text widget inside a Center widget as shown below.
Flutter – Center Align Text in Text Widget To center align the text in a Text widget, provide textAlign property with value TextAlign. center .
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)),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With