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.
018 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: trueHere 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
1It 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
Examplein 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') ) )
