Home > Software engineering >  How to space the icons evenly in the bottom navigation bar in flutter?
How to space the icons evenly in the bottom navigation bar in flutter?

Time:07-22

I am trying to space the icons evenly in the bottom navigation bar but it appears that the first icon has more padding than the other icons whereas there is no padding added to the icons whatsoever. The bottom navigation bar is as stock as I can let it be but unfortunately the offset icons disturb me and I want to figure out a way to fix that.

enter image description here

Here is the code for the bottom navigation bar that I am currently using.

BottomNavigationBar(
      currentIndex: index,
      showSelectedLabels: false,
      showUnselectedLabels: false,
      iconSize: 26,
      onTap: (val) {
        setState(() {
          index = val;
        });
      },
      items: const [
        BottomNavigationBarItem(
          icon: Icon(
            Icons.cottage_outlined,
            color: navyBlue,
          ),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(
            Icons.menu_book_sharp,
            color: navyBlue,
          ),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(
            Icons.event_note_outlined,
            color: navyBlue,
          ),
          label: '',
        ),
        BottomNavigationBarItem(
          icon: Icon(
            Icons.person_outline_sharp,
            color: navyBlue,
          ),
          label: '',
        ),
      ],
    );

CodePudding user response:

Try adding a type

 BottomNavigationBar(
      type: BottomNavigationBarType.fixed
...
)
  • Related