flutter: how to add padding to bottom navigation bar items so the items stay farther away from each other

Question

ok so I have a bottom navigation bar with a floating action button as shown below:

now because I have the floating action button I want the profile and home icons to stay farther away from my button. if I add padding to the icon, the labels won't move with the icons (obviously). So does anyone now how i can do this? just to be more specific here is the image of what I want the bottom bar to look like:

here is my code:

class MainNavigationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return WillPopScope(
      onWillPop: () {
       //TODO implement later
        
          
      },
      child: Consumer<MainNavigationNotifier>(
        builder: (_, notifier, __) => Scaffold(
          body: IndexedStack(index: notifier.tabIndex, children: [
            IndexedStack(
              index: notifier.pages[0].length - 1,
              children: notifier.pages[0],
            ),
            IndexedStack(
              index: notifier.pages[1].length - 1,
              children: notifier.pages[1],
            ),
           
          ]),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              padding: const EdgeInsets.only(bottom: 6.0),
              
              child:  FloatingActionButton(
                onPressed: () {},
               
                child: SvgPicture.asset(AppVectors.CREATE_ORDER),
              ),
            ),
          ),
          bottomNavigationBar: Container(
            decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: AppColors.LIGHT_GREY.withOpacity(0.4),
                  blurRadius: 4,
                ),
              ],
            ),
            child: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              onTap: notifier.onTabTap(),
              elevation: 10,
              currentIndex: notifier.tabIndex,
              backgroundColor: Theme.of(context).bottomAppBarColor,

              selectedItemColor: Theme.of(context).primaryColor,
              unselectedItemColor: Theme.of(context).unselectedWidgetColor,
              unselectedFontSize: 14,
              items: [
                BottomNavigationBarItem(
                  icon: Padding(
                    padding: const EdgeInsets.only(bottom: 4.0),
                    child: SvgPicture.asset(
                      AppVectors.HOME,
                      height: 25,
                      color: Theme.of(context).unselectedWidgetColor,
                    ),
                  ),
                  label: AppStrings.HOME,
                  tooltip: "",
                  activeIcon: Padding(
                    padding: const EdgeInsets.only(bottom: 4.0),
                    child: SvgPicture.asset(
                      AppVectors.HOME,
                      height: 25,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                ),

                  
                BottomNavigationBarItem(
                    activeIcon: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: SvgPicture.asset(
                        AppVectors.PROFILE,
                        height: 27,
                        width: 27,
                        color: Theme.of(context).primaryColor,
                      ),
                    ),
                    tooltip: "",
                    icon: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: SvgPicture.asset(
                        AppVectors.PROFILE,
                        height: 27,
                        width: 27,
                        color: Theme.of(context).unselectedWidgetColor,
                        //  color: Theme.of(context).focusColor,
                      ),
                    ),
                    label: AppStrings.PROFILE),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Try implementing a custom BNB or create a BNB item behind FAB or use packages in pub.dev like [convex_bottom_bar](https://pub.dev/packages/convex_bottom_bar) or [persistent_bottom_nav_bar](https://pub.dev/packages/persistent_bottom_nav_bar) — Sajad Abdollahi, Aug 18 '21 at 06:59

score 2 · Accepted Answer · answered Aug 18 '21 at 08:49

you can use Column for both icon and active icon, and add align to the Column.just like this

Align(
      alignment: Alignment.centerLeft,
      child: Padding(
      padding: const EdgeInsets.only(left: 8.0),
      child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [Icon(Icons.people), Text('HOME')],
      ),
     ),
    ),

add showSelectedLabels: false, showUnselectedLabels: false, to the bottomnavigation bar to remove label.done This is the code sample you can see this dartpad code

score 1 · Answer 2 · answered Aug 18 '21 at 07:41

1

This is one of the reasons why I prefer a custom BottomAppBar as bottom navigation bar, gives much more control. However, you can use a simple but not so nice solution: add a third BottomNavigationBarItem between the existing two, with empty text and invisible icon like this:

BottomNavigationBarItem(
    label: "",
    icon: Visibility(visible: false, child: Icon(Icons.home))),

answered Aug 18 '21 at 07:41

Peter Koltai

8,296
2
10
20

thanks for answering. yeah I'm probably just gonna use a custom app bar. – Kimiya Zargari Aug 18 '21 at 12:15
@Kim Sure thing, I agree it's the better way. – Peter Koltai Aug 18 '21 at 15:08

flutter: how to add padding to bottom navigation bar items so the items stay farther away from each other

2 Answers2