Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove default padding or margin on Bottom Navigation Bar from Flutter

enter image description here

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)),
            ),
like image 419
Gabriel Beckman Avatar asked Jun 30 '20 20:06

Gabriel Beckman


1 Answers

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

like image 181
Underscore Avatar answered Oct 10 '22 07:10

Underscore