Flutter Appbar Full Width Title

I wanted to create a slightly different appbar style for a new page route that animated in from bottom. The UX would give the sense of dismissing the page, rather than navigating back a page, and the AppBar would be reminiscent of iOS styling. The title property of the AppBar takes a widget and was my best bet since we can make the widget anything we want. I was trying to use only the ‘title’ property and assumed it would just ‘do the right thing’ by expanding to be full width. But there are a couple of other properties that need to be set before this will work.

And here is the my AppBar widget code originally looked like:

AppBar(
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      FlatButton(
        onPressed: () => Navigator.pop(context),
        child: Text('Cancel'),
      ),
      Text(widget.title),
      FlatButton(
        onPressed: _isEdited && !_isPending && !_isInvalid ? _saveSetting : null,
        child: Text('Done'),
      ),
    ],
  ),
),

I guess it came time to RTFM. From the Flutter AppBar Class Docs:

If the leading widget is omitted, but the AppBar is in a Scaffold with a Drawer, then a button will be inserted to open the drawer. Otherwise, if the nearest Navigator has any previous routes, a BackButton is inserted instead. This behavior can be turned off by setting the automaticallyImplyLeading to false. In that case a null leading widget will result in the middle/title widget stretching to start.

In my case, Flutter was literally inflamed that I didn’t include a ‘leading’ property because my navigator had previous routes. I.e. - it REALLY wanted to put a BackButton and turned red and yellow because I omitted the ‘leading’ property.

Let’s try again…

This is much better, but there’s still some weird padding around the title property. Let’s have a look at the docs again:

titleSpacing property

The spacing around title content on the horizontal axis. This spacing is applied even if there is no leading content or actions. If you want title to take all the space available, set this value to 0.0.

One more time…

There you have it. Now the ‘Cancel’ and ‘Done’ FlatButtons are properly aligned, and the title property of the AppBar widget is taking the full width.

Full code example:

AppBar(
  automaticallyImplyLeading: false,
  titleSpacing: 0.0,
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      FlatButton(
        onPressed: () => Navigator.pop(context),
        child: Text('Cancel'),
      ),
      Text(widget.title),
      FlatButton(
        onPressed: _isEdited && !_isPending && !_isInvalid ? _saveSetting : null,
        child: Text('Done'),
      ),
    ],
  ),
),

I don’t know why I tripped up on this initially. I guess I should slow down and read the freaking manual. I don’t want to blame Flutter too much since it’s quite magical for being able to develop natively-compiled Android and iOS apps from a single codebase BUT… it would have been nice if Flutter just did the right thing; future releases will tell.

• flutter