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:

enter image description here

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

enter image description here

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)

Leave a Reply

Your email address will not be published.