In this flutter tutorial, we are going to create a floating action button in flutter. We will create FAB using widget provided by flutter material design FloatingActionButton(). Floating Action button is useful when it comes to perform some key actions like add something, find location, add to cart etc whereas, it should not be use with regular actions like profile, settings etc.
Watch Youtube tutorial
Floating Action Button with Bottom App Bar
return Scaffold(
backgroundColor: Colors.yellow.shade700,
appBar: AppBar(
centerTitle: true,
title: Text(
"Floating Action Button",
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.black45,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
backgroundColor: Colors.black87,
foregroundColor: Colors.yellow,
elevation: 0,
// shape: BeveledRectangleBorder(
// // borderRadius: BorderRadius.circular(20.0),
// // side: BorderSide(color: Colors.blue, width: 2.0, style: BorderStyle.solid)
// ),
// mini: true,
),
bottomNavigationBar: BottomAppBar(
notchMargin: 5.0,
shape: CircularNotchedRectangle(),
color: Colors.black87,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
mainAxisSize: MainAxisSize.max,
children: [
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.home,
color: Colors.white,
),
Text(
"Home",
style: TextStyle(color: Colors.white),
)
],
),
),
Padding(
padding:
const EdgeInsets.only(right: 20.0, top: 10.0, bottom: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.shopping_cart,
color: Colors.white,
),
Text(
"Shop",
style: TextStyle(color: Colors.white),
)
],
),
),
Padding(
padding:
const EdgeInsets.only(left: 20.0, top: 10.0, bottom: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.favorite,
color: Colors.white,
),
Text(
"Fav",
style: TextStyle(color: Colors.white),
)
],
),
),
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.settings,
color: Colors.white,
),
Text(
"Setting",
style: TextStyle(color: Colors.white),
)
],
),
),
],
),
),
);
