title: Flutter Bottom Navigation Bar Design And Indicator
body: <p>I'm trying to make the bottom navbar as in the picture, but I'm having difficulty adjusting the spacing between the items. I used an image instead of an icon. And I gave the images width and height values. But when I wanted to reduce their whitespace, I couldn't achieve it. Can you help me with this?</p>
  <p>IMAGE:</p>
  <p><a href="https://i.stack.imgur.com/Y9xYE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y9xYE.png" alt="enter image description here" /></a></p>
  <p>MY CODE:</p>
  <pre><code>bottomNavigationBar: !navBarHide
                ? SafeArea(
                    child: BottomNavigationBar(
                        onTap: (index) {
                          debugPrint(controller.tabIndex.toString());
                          controller.tabChange(index);
                          controller.update();
                          if (index == 0) {
                            Get.offAndToNamed('dashboard');
                          } else if (index == 1) {
                            Get.offAndToNamed('blank');
                          } else if (index == 2) {
                            Get.offAndToNamed('home');
                          } else if (index == 3) {
                            Get.offAndToNamed('blank');
                          } else if (index == 4) {
                            Get.offAndToNamed('menu');
                          }
                        },
                        unselectedLabelStyle: TextStyle(fontSize: 0),
                        unselectedFontSize: 0,
                        unselectedIconTheme: IconThemeData(
                          size: Get.width &gt; 390 ? 24.sp : 24.sp,
                        ),
                        selectedFontSize: 0,
                        selectedIconTheme: IconThemeData(
                          size: Get.width &gt; 390 ? 24.sm : 24.sm,
                        ),
                        selectedLabelStyle: TextStyle(fontSize: 0),
                        type: BottomNavigationBarType.fixed,
                        landscapeLayout:
                            BottomNavigationBarLandscapeLayout.spread,
                        unselectedItemColor: Colors.black,
                        selectedItemColor: Colors.orange,
                        showSelectedLabels: false,
                        showUnselectedLabels: false,
                        currentIndex: controller.tabIndex,
                        // tamamdır
                        items: [
                          _bottomNavbarItem(
                            AppAssets.card_icon,
                            '',
                          ),
                          _bottomNavbarItem(
                            AppAssets.key_icon,
                            '',
                          ),
                          _bottomNavbarItem(
                            AppAssets.home_icon,
                            '',
                          ),
                          _bottomNavbarItem(
                            AppAssets.doc_icon,
                            '',
                          ),
                          _bottomNavbarItem(
                            AppAssets.menu_icon,
                            '',
                          ),
                        ]),
                  )
                : null,
  //ITEMSMETHOD
    _bottomNavbarItem(String assetName, String label) {
  return BottomNavigationBarItem(
    icon: Image.asset(
      assetName,
      width: 25.w,
      height: 22.h,
      fit: BoxFit.contain,
    ),
    activeIcon: Container(
      width: 25.w,
      height: 22.h,
      child: Image.asset(assetName),
    ),
    label: label,
  );
  } }
  </code></pre>
  <p>MY OUTPUT:</p>
  <p><a href="https://i.stack.imgur.com/e7i1C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e7i1C.png" alt="enter image description here" /></a></p>