How to center the title of an appbar
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)),
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,
],
),
);
}