Remove default padding or margin on Bottom Navigation Bar from Flutter

Question

This is the picture of the problem, is it a default padding on Bottom Navigation Bar? If it is, how can I remove it?

As you can see in the code below, I have a container and a icon inside of the BottomNavigationBarItem, but there is a space between the icon and the bar.

return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Color.fromARGB(255, 18, 124, 157),
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            activeIcon: Container(
              margin: EdgeInsets.all(0),
              padding: EdgeInsets.all(0),
              height: 50,
              width: 300,
              color: Color.fromARGB(255, 18, 124, 157),
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            icon: Container(
              margin: EdgeInsets.all(0),
              padding: EdgeInsets.all(0),
              height: 50,
              width: 300,
              color: Colors.white,
              child: Icon(Icons.home,
                  size: 40, color: Color.fromRGBO(114, 114, 114, 1)),
            ),

Parrie

That is neither padding nor margin that is doing that, you are controlling that by using the height and width properties from activeIcon – Picayune

Noppp, when I increase the height, the margin or padding still would be there. – Parrie

Okay, I just found a way, I'm using a the widget BottomAppBar and using MaterialButtons inside of it, just like in this repo: github.com/mahtab-ali/Flutter-Bottom-Tab-Bar – Parrie

Answer 1

That space is reserved by the BottomNavigationBarItem text so you must set selectedFontSize to 0 in the BottomNavigationBar.

Stopper

Answer 2

I solve this issue like this, Click "BottomNavigationBar" and find topPadding then set its value to 0, this process is the same for bottom padding

Jourdain

Answer 3

You can remove the default padding and margin of a selected item in a bottom navigation bar by wrapping the BottomNavigationBarItem in a Container and setting the margin and padding properties to EdgeInsets.zero.

BottomNavigationBar(
      items: [
        Container(
          margin: EdgeInsets.zero,
          padding: EdgeInsets.zero,
          child: BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
        ),
        // other items...
      ],
      // other properties...
    ),

It's also possible to customize the selected item style by using BottomNavigationBarType.shifting and BottomNavigationBarType.fixed and set the selectedItemColor and unselectedItemColor properties.

Screwed

this will show a compile time error, becuase the items property requires a list of BottomNavigationBarItem, and using a Container is not working. – Onfroi