Flutter. Combinations of using BottomAppBar with FloatingActionButton

Image for post
Image for post

All versions are used as properties of Scaffold widget

Image for post
Image for post

Version 1

Image for post
Image for post
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

Image for post
Image for post
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

Image for post
Image for post

Changing only floatingActionButtonLocation property

FloatingActionButtonLocation.centerFloat

Version 4

Image for post
Image for post

Changing only floatingActionButtonLocation property

FloatingActionButtonLocation.centerDocked

Version 5

Image for post
Image for post

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

Image for post
Image for post
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

Image for post
Image for post

BottomIcon widget

MainApp widget

Image for post
Image for post

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store