Flutter How-To: Using BottomAppBar widget

Google has just announced Flutter beta 3 which includes a new Material Design component called ‘BottomAppBar widget’. As soon as I read the blog post, I thought of trying this new widget out. This new Material component can be seen in action in the recently launched Google Tasks app.

Bottom App Bar in Google Tasks app

Flutter’s BottomAppBar widget is easy to use but it requires some additional settings to make it work as intended. The widget has a very nifty feature which allows a Floating Action Button to be docked in it.

1. Adding BottomAppBar in Scaffold

Adding the bottom app bar in a Scaffold widget is pretty straightforward. Following is an example of how to add it.

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(title: const Text('Bottom App Bar')),
    bottomNavigationBar: BottomAppBar(
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.menu), onPressed: () {},),
          IconButton(icon: Icon(Icons.search), onPressed: () {},),
        ],
      ),
    ),
  );
}

Per the official docs, the BottomAppBar widget must be used in place of bottomNavigationBar parameter of Scaffold widget. The above snippet will show a bottom app bar like this:

A simple bottom app bar

2. Adding a Floating Action Button

Here comes the interesting part. The BottomAppBar widget has a cool feature which allows embedding a floating action button. It has a toggle to give a notch style around the floating action button. Following is a sample code:

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(title: const Text('Bottom App Bar')),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      child: const Icon(Icons.add), onPressed: () {},),
    bottomNavigationBar: BottomAppBar(
      shape: CircularNotchedRectangle(),
      notchMargin: 4.0,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.menu), onPressed: () {},),
          IconButton(icon: Icon(Icons.search), onPressed: () {},),
        ],
      ),
    ),
  );
}

The notchMargin property of BottomAppBar must be set to some non-zero value and the shape property must be set to a NotchedShape, which in this case is CircularNotchedRectangle. It is also important to set the floatingActionButtonLocation parameter of the Scaffold widget to Docked (centerDocked or endDocked). This way, the app bar will have a cut-out for floating action button which looks pretty cool.

Bottom app bar with a ‘notch’

Bonus: Create Google Tasks like bottom app bar

With this new widget, creating something like Google Tasks app bar is now a piece of cake. FloatingActionButton widget has an extended constructor which allows for adding a label. Here’s the code which creates similar app bar.

Widget build(BuildContext context) {
  return new Scaffold(
    appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
    floatingActionButton: FloatingActionButton.extended(
      elevation: 4.0,
      icon: const Icon(Icons.add),
      label: const Text('Add a task'),
      onPressed: () {},
    ),
    floatingActionButtonLocation: 
      FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: BottomAppBar(
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
    ),
  );
}

Google Tasks like app bar, created with Flutter

Complete source code can be found here and here.

I hope you like this quick post. Tell me what do you think about this component in comments.