BottomNavigationBar // Ho to change spacing of the BottomNavigationBarItems

Issue

EDIT: Solution below

Goal/Problem: I’m styling a BottomNavigationBar with a FAB. I’d like to move items 2 and 3 a bit further apart, so they don’t hug the FAB so closely. Screenshots and code below.

Failed solutions:

• Google showed me lots of post where people wrap the icons in Padding;
  but for me, the labels don’t move with the icons.
• I wrapped the BottomNavigationBarItem itself in Padding, but
  the icon list of the BottomNavigationBar doesn’t take Padding as a child.
• I cannot use SizedBoxes, as I can only use BottomNavigationBarItem as
  a child in the list
• If I wrap the FAB in Padding, it just moves the FAB, but has no influence on the positioning of the items in the nav bar.
• I cannot wrap the label with Padding as the property just takes strings

Screenshots:

No padding:

With horizontal Padding for demonstration purposes, icons and labels not in sync:

Code (with relevant Padding on zero):

BottomNavigationBarItem bottomNavIcon({
  required BuildContext context,
  required Image icon,
  required Image icon_active,
  required String label,
}) {
  return BottomNavigationBarItem(
    icon: Padding(
      padding: EdgeInsets.only(
        top: 6.h,
        bottom: 3.h,
        left: 0.w
        right: 0.w,
      ),
      child: icon,
    ),
    activeIcon: Padding(
      padding: EdgeInsets.only(
        top: 6.h,
        bottom: 3.h,
        left: 0.w
        right: 0.w,
          ),
      child: icon_active,
    ),
    label: label,
  );
}

Desperate solution:
I’m considering placing an invisible icon in the middle and have the onTap method of the navbar do nothing for index 2 … but that really feels like a hack.

EDIT//The "solution":

I ended up using the hack.Thanks to MSARkrish for giving me this snippet:

BottomNavigationBarItem(
    backgroundColor: Theme.of(context).backgroundColor,
    icon: const SizedBox.shrink(),
    label: "",
  ),

Things I needed to do to make it work:

• I added a SizedBox in the list holding the pages; otherwise the icons
  ake the ontap do nothing for index 2:

         onTap: (index) => index != 2 ? selectPage(index) : () {},
  

• I also disabled feedback for the the buttons, otherwise you’d hear a pop, when tapping the invisible button.

• I already had higjhlight colors and splash colors of. I guess they’d cause issues as well, if they were enabled.

God…I hate the BottomNavigationBar widget … never gonna use that one again… Better to create it from scratch.

Solution

I also faced similar situation in one of our office project. We did this hack to achieve UI like yours.

BottomNavigationBarItem(
        backgroundColor: Theme.of(context).backgroundColor,
        icon: const SizedBox.shrink(),
        label: "",
      ),

Answered By – MSARKrish

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)