Insetting FABs within the BottomAppBar

posted in Android on by
Insetting FABs within the BottomAppBar
FacebookTwitterReddit
On Android we recently saw the introduction and use of the Bottom App Bar which also allows you to add a ‘notch’ when a floating action button component is to be inset into the view. I quite like the look of this component and wanted to make use of it within a Flutter side-project I’m currently working on. I originally thought that I’d have to make this view component myself as it still seems like a new-ish component in the Android world. However, after doing some reading of the documentation I discovered that the Flutter team are on it and it is already available!

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 🙂