Centering in the AppBar with the back button

Question

I store in the title the text and icon that are displayed in the AppBar in the center. During the transition, the back button that appears takes up part of the line and my centering shifts. Can I somehow get around this and make the titled centered even if there is a back button ?

The bottom icon is located in the center of the screen

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
        color: Colors.grey
   ), 
          elevation: 0,
          title: Center(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.telegram_sharp, color: iconColor),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
              Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          ))),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            _MainInfoWidget(),
          ],
        ),
      ),
    );
  }

Does this answer your question? [How to center the title of an appbar](https://stackoverflow.com/questions/43981406/how-to-center-the-title-of-an-appbar) — Md. Yeasin Sheikh, Jul 04 '22 at 18:08
@YeasinSheikh No, only doing `centerTitle: true` in this case won't solve the problem. See my below answer. You can retract your close vote. — MendelG, Jul 04 '22 at 18:12
@YeasinSheikh Correct, my bad, I didn't look at _all_ the other answers. I have casted a vote to close this question. — MendelG, Jul 04 '22 at 18:16
It is ok I think, while it is easier to answer rather than finding. — Md. Yeasin Sheikh, Jul 04 '22 at 18:18

MendelG · Accepted Answer · 2022-07-04T18:20:37.110

You need to set the following properties on the Row():

MainAxisAlignment.center
MainAxisSize.min

And: centerTitle: true On the appBar(). Also, remove your Center() widget.

Complete example:

Scaffold(
      appBar: AppBar(
          centerTitle: true,
          leading: BackButton(color: Colors.grey),
          elevation: 0,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(Icons.telegram_sharp, color: Colors.black),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
              Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          )),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Container(),
      ),
    );

Result:

Mahi · Answer 2 · 2022-07-04T18:00:05.293

2

Try this

AppBar(
centerTitle: true

And

mainAxisSize: MainAxisSize.min

Or if that's not helped

When the transition occurs, change


mainAxiAlignment: MainAxisAlignment.start otherwise center

edited Jul 04 '22 at 18:00

answered Jul 04 '22 at 17:53

Mahi

1,297
1
14
28

Row -> mainAxisSize: MainAxisSize.min – Qori Jul 04 '22 at 17:58
Updated now. Check – Mahi Jul 04 '22 at 18:04

Centering in the AppBar with the back button

2 Answers2