One of the new features introduced in the Google I/O 2018 was Material Theming, which customizes Material Design to better reflect our product’s brand. These changes improve elements as typography, surfaces and components. For this reason, Google is introducing a brand new library of components based on Material Design called Material Components.

One of the new components is the BottomAppBar based on AppBar and which provides the possibility of having our action bar in the bottom and adding a floating action button (FAB).

In order to use this component we need to import the ‘material’ library in our code.

import 'package:flutter/material.dart';

To insert the BottomAppBar in our view, we should specify the object as parameter of Scaffold object.

bottomNavigationBar: new BottomAppBar(

child: new Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

IconButton(onPressed: () {}, icon: Icon(Icons.menu),),

],

),

),

BottomAppBar without FAB

Then, we insert our FAB component and to do this, we add the object following our BottomNavigationBar.

bottomNavigationBar: new BottomAppBar(

child: new Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

IconButton(onPressed: () {}, icon: Icon(Icons.menu),),

],

),

),

floatingActionButton: new FloatingActionButton(

onPressed: () {},

child: Icon(Icons.add),

),

To insert the component in the bottom bar we specify the parameter FloatingActionButtonLocation. We define if is ‘centerDocked’ or ‘endDocked’ to modify the button position. If we want the notch to appear, we add ‘hasNotch: true’ to our BottomAppBar.

bottomNavigationBar: new BottomAppBar(

shape: CircularNotchedRectangle(),

child: new Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: <Widget>[

IconButton(onPressed: () {}, icon: Icon(Icons.menu),),

],

),

),

floatingActionButton: new FloatingActionButton(

child: Icon(Icons.add), onPressed: () {},

),

floatingActionButtonLocation:

FloatingActionButtonLocation.centerDocked,

UPDATE: hasNotch: true has been replaced by shape: CircularNotchedRectangle(), . If we want to eliminate the notch we must eliminate this line.

BottomAppBar with notch centered

bottomNavigationBar: new BottomAppBar(

// shape: CircularNotchedRectangle(),

...

),

...

floatingActionButtonLocation:

FloatingActionButtonLocation.endDocked,

BottomAppBar without notch and end aligned

Extended FAB

Other new component is the Extended FAB, which is wider, includes a text label and doesn’t need an icon necessarily.

Extended FAB

To get this component, we should modify the definition of our button.

floatingActionButton: new FloatingActionButton.extended(

icon: Icon(Icons.add),

label: Text('Add new'),

onPressed: () {},

),

BottomAppBar with Extended FAB

Customization (optional)

One of the interesting features that provides Flutter is the freedom to customize our components. With a few lines we could define the style of our button to adapt the design to our product. For example, we could modify the color and shape of button.

floatingActionButton: new FloatingActionButton.extended(

icon: new Icon(Icons.add),

label: new Text('Add new'),

backgroundColor: Colors.indigo,

onPressed: () {},

shape: new BeveledRectangleBorder(

borderRadius: new BorderRadius.circular(0.0)

),

),

floatingActionButton: new FloatingActionButton.extended(

icon: new Icon(Icons.add_shopping_cart),

label: new Text('ADD TO CART'),

onPressed: () {},

shape: new BeveledRectangleBorder(

borderRadius: new BorderRadius.circular(8.0)

),

),