Flutter. Combinations of using BottomAppBar with FloatingActionButton

Artem Diashkin

·Apr 19, 2020

All versions are used as properties of Scaffold widget

Version 1

bottomNavigationBar: BottomAppBar(
  color: Colors.blueGrey,
  shape: const CircularNotchedRectangle(),
  child: Container(
    height: 60.0,
  ),
),
floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.blueGrey,
  onPressed: null,
  child: Icon(Icons.account_circle),
),

Version 2

bottomNavigationBar: BottomAppBar(
  color: Colors.blueGrey,
  shape: const CircularNotchedRectangle(),
  child: Container(
    height: 60.0,
  ),
),
floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.blueGrey,
  onPressed: null,
  child: Icon(Icons.account_circle),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,

Version 3

Changing only floatingActionButtonLocation property

FloatingActionButtonLocation.centerFloat

Version 4

Changing only floatingActionButtonLocation property

FloatingActionButtonLocation.centerDocked

Version 5

Wrap with padding OR notchMargin property

bottomNavigationBar: BottomAppBar(
  notchMargin: 40.0, << === OR
  color: Colors.blueGrey,
  shape: const CircularNotchedRectangle(),
  child: Container(
    height: 60.0,
  ),
),
floatingActionButton: Padding( << == OR
  padding: const EdgeInsets.all(40.0),
  child: FloatingActionButton(
    backgroundColor: Colors.blueGrey,
    onPressed: null,
    child: Icon(Icons.account_circle),
  ),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Version 6

bottomNavigationBar: BottomAppBar(
  color: Colors.blueGrey,
  shape: CircularNotchedRectangle(),
  child: Container(
    height: 50.0,
  ),
),
floatingActionButton: Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    FloatingActionButton(
      backgroundColor: Colors.blueGrey,
      onPressed: () {},
      child: Icon(Icons.account_circle),
      heroTag: null,
    ),
    FloatingActionButton(
      backgroundColor: Colors.blueGrey,
      onPressed: () {},
      child: Icon(Icons.account_circle),
      heroTag: null,
    ),
    FloatingActionButton(
      backgroundColor: Colors.blueGrey,
      onPressed: () {},
      child: Icon(Icons.access_alarm),
      heroTag: null,
    ),
  ],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

Version 7

BottomIcon widget

MainApp widget