flutter Floatingbutton overlap bottomnavigation bar item

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

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

Answer 2

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