flutter Floatingbutton overlap bottomnavigation bar item - dart

Question

how to set padding on bottombar with floating button. floatingbutton is overlaping tbottom bar item.
return new Scaffold(
appBar: AppBar(title: const Text('Bottom App Bar')),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
backgroundColor: Colors.red,
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 5.0,
elevation: 5.0,
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
]),
),
);
here is a example. thank you for your help
please help!

Answer 1

BottomAppBar can have a notch along the top that makes room for an overlapping FloatingActionButton.
You should use BottomNavigationBar instead of BottomAppBar and the floating action button will be placed above the navigation bar

Answer 2

try this
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.all_inclusive),
tooltip: 'Increment',
elevation: 2.0,
backgroundColor: Colors.purple[900],
onPressed: (){
setState(() {
currentScreen=Profile();
currentTab = 0;
},
);
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
notchMargin: 7,
shape: CircularNotchedRectangle(),
child: Container(
// color: Colors.black12,
// color: Colors.deepPurple[500],
height: 60,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=Profile();
currentTab = 0;
},
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.group,color: currentTab ==0 ? Colors.blue:Colors.grey[500]),
Text('Profile',style: TextStyle(color: currentTab ==0 ? Colors.blue:Colors.grey[500],
),
)
],
),
),
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=About();
currentTab = 2;
},);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.perm_contact_calendar,color: currentTab ==2 ? Colors.blue:Colors.grey[500]),
Text('Contact',style: TextStyle(color: currentTab ==2 ? Colors.blue:Colors.grey[500]),
),
],
),
)
],
),
// SizedBox(width: 48,),
Row(
// mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=About();
currentTab = 1;
},);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.info_outline,color: currentTab ==1 ? Colors.blue:Colors.grey[500]),
Text('About',style: TextStyle(color: currentTab ==1 ? Colors.blue:Colors.grey[500],
),
)
],
),
),
MaterialButton(
// minWidth: 40,
onPressed: (){
setState(() {
currentScreen=Noti();
currentTab = 3;
},);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.notifications,color: currentTab ==3 ? Colors.blue:Colors.grey[500]),
Text('Notification',style: TextStyle(color: currentTab ==3 ? Colors.blue:Colors.grey[500],
),
)
],
),
),
],
)
],
)
),
),
);
}
I have just created 2 different rows for items in bottomnav bar
i.e. one from left and one from right that's it