close

How to center the title of an appbar

Basic AppBar with Center Title… ..

AppBar (                                                  backgroundColor: Colors.blue, 
title: new Text("Title"),
elevation: 4.0, 
centerTitle: true,
),

Basic ApBar with IconTheme and TextTheme… ..

AppBar(
        backgroundColor: Colors.blueAccent,
        title: new Text("Title"),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.search),
              onPressed: (){},
              ),
        ],
        iconTheme: IconThemeData(
          color: Colors.white,
        ),
        textTheme: TextTheme(
          title: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
          )
        ),
      ),

AppBar with List Of Action Button… ..

AppBar(
        backgroundColor: Colors.blueAccent,
        title: new Text("Title"),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.search),
              onPressed: (){},
          ),
          new IconButton(icon: new Icon(Icons.menu),
            onPressed: (){},
          ),
        ],
      ),

AppBar with Title and Sub Title at Center… …

AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.blueAccent,
        title: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text(
                "Title",
                style: TextStyle(fontSize: 20.0),
              ),
              new Text(
                "SubTile",
                style: TextStyle(fontSize: 14.0),
              )
            ],
          ),
        ),
      ),

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment