BottomNavigationBar // Ho to change spacing of the BottomNavigationBarItems

Question

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.

score 2 · Accepted Answer · edited Mar 20 '22 at 18:02

2

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: "",
      ),

edited Mar 20 '22 at 18:02

Dharman

30,962
25
85
135

answered Mar 20 '22 at 17:57

MSARKrish

3,355
4
30
43

Heym thanks for answering, but can you elaborate a bit? Doesn't that just make the icon as small as possible? How does that move it (or the label). EDIT: You're using that as an invisible item in the middle? – Joe Mar 20 '22 at 18:20
OK...I used it as an invisible spacer and it works. I had to do some other things as well. I'll edit the OP. – Joe Mar 20 '22 at 18:34
@Joe my code will create empty space equal to other navigation bar item. so that floating action button will have equal space like bottom navigation bar item – MSARKrish Mar 20 '22 at 18:43

score 2 · Answer 2 · answered Mar 21 '22 at 02:28

2

This is what I found in the documentation, represenatation of SizedBox.shrink(),

const SizedBox.shrink(
{Key? key,
Widget? child}
)

Example:

const SizedBox.shrink({ Key? key, Widget? child })
  : width = 0.0,
    height = 0.0,
    super(key: key, child: child);

answered Mar 21 '22 at 02:28

Manishyadav

1,361
1
8
26

This is just for knowledge purpose, might help someone in future – Manishyadav Mar 21 '22 at 02:28

BottomNavigationBar // Ho to change spacing of the BottomNavigationBarItems

2 Answers2