The way in which we can achieve this is like so:

return new Scaffold(
  floatingActionButton: new FloatingActionButton(
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: new BottomAppBar(
    color: Colors.white,
    child: new Row(...),
  ),
);

So here we have our floatingActionButton defined which just states our FAB to be shown on screen. We also have a BottomAppBar component defined as our bottomNavigationBar argument, this is essentially a AppBar (or toolbar) which is shown at the bottom of the screen. Now the important part here is the floatingActionButtonLocation component, this is what decides where our FAB is to be placed. If you don’t set this then the FAB will not be inset into the BottomAppBar. We have four choices to use for this argument:

floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerDocked

floatingActionButtonLocation:    
      FloatingActionButtonLocation.centerFloat

floatingActionButtonLocation:    
      FloatingActionButtonLocation.endDocked

floatingActionButtonLocation:    
      FloatingActionButtonLocation.endFloat

And that’s all it requires to achieve this notched BottomAppBar, pretty neat!

I’m a big fan of the notched bottom app bar myself and I’m looking forward to seeing it being used in more apps. If you have any questions or thoughts that you’d like to share then please get in touch 🙂

Tweets by hitherejoe