How to center the IconButton of Appbar in flutter

Issue

I working with a flutter application and see a problem in the App bar.
The icon button is not at the center of the App bar.

This is my code.

appBar: AppBar(
    automaticallyImplyLeading: false,
    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.home),
          onPressed: null,
      )
    ],
  ),

The IconButton is not in center of appbar or navbar.

Solution

Here’s a workaround you can do to achieve this since actions are usually after the title as the docs says AppBar class.

appBar: AppBar(
            automaticallyImplyLeading: false,
            centerTitle: true,
            title: Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.home),
                  onPressed: null,
                ),
                IconButton(
                  icon: Icon(Icons.trending_up),
                  onPressed: null,
                ),
                IconButton(
                  icon: Icon(Icons.people_outline),
                  onPressed: null,
                ),
                IconButton(
                  icon: Icon(Icons.person_outline),
                  onPressed: null,
                ),
                IconButton(
                  icon: Icon(Icons.notifications_none),
                  onPressed: null,
                ),
                IconButton(icon: Icon(Icons.search), onPressed: null),
                IconButton(
                  icon: Icon(Icons.brightness_5),
                  onPressed: null,
                ),
              ],
            )),

But maybe you should consider using TabBar in your case instead.

Answered By – Slah Layouni

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *