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:

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')),
    floatingActionButton 
      FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(
      child: const Icon(Icons.add), onPressed: () {},),
    bottomNavigationBar: BottomAppBar(
      hasNotch: true,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(icon: Icon(Icons.menu), onPressed: () {},),
          IconButton(icon: Icon(Icons.search), onPressed: () {},),
        ],
      ),
    ),
  );
}

The hasNotch property of BottomAppBar must be set totrue. 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.

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: () {},
    ),
    floatingActionButton 
      FloatingActionButtonLocation.centerDocked,
    bottomNavigationBar: BottomAppBar(
      hasNotch: false,
      child: new Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),
    ),
  );
}

Complete source code can be found here and here.