Increase width of AppBar leading property

Viewed 2227

I'm trying to put text (custom text button) into leading property of AppBar. However when the text get too long then the text end up in multiple lines

Scaffold(
      appBar: AppBar(
        centerTitle: true,
        leading: Text('Go back to'),
      ),
    )

enter image description here

How do I increase width of AppBar leading property?

I don't want to use title because it makes centering title a PITA.

Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[Text('go back to'), Text('My center title')],
        ),
      ),
    )

enter image description here

Is there any way to change it without messing with title property?

2 Answers

You can set a custom leading width by using the leadingWidth property in the appBar:

Scaffold(
      appBar: AppBar(
        leadingWidth: 400,
        leading: Text('Go back to'),
        centerTitle: true,
        title: Text('Center title'),
      ),
)

It is a predefined widget. You can, however, do this:

  appBar: AppBar(
  automaticallyImplyLeading: false, // Don't show the leading button
  title: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      IconButton(
        onPressed: () => Navigator.pop(context),
        icon: Icon(Icons.arrow_back, color: Colors.white),
      ),
      // Your widgets here
    ],
  ),
),

The automaticallyImplyLeading: true will hide the leading button so you can add your own widgets. Good luck!

Related