2

I found that the bottom navigation bar items are not properly center aligned in some iphones which have the default safe areas in those.For eg:In this picture the items are not properly center aligned. How can I canter align these items properly?

enter image description here

But in here the items are properly aligned.

enter image description here.

My code is:

Scaffold(
          body: _children[watch(tabviewProvider).currentBottomNavIndex],
          bottomNavigationBar: Container(
            height: watch(tabviewProvider).isBottomTabbarHide ? 0.0 : (SizeConfig.blockSizeVertical)*10, //94
            decoration: BoxDecoration(
              color: Colors.orange,//Todo:remove
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Color(0xffE5E5E5),
                  blurRadius: 5,
                ),
              ],
            ),
            child: Align(
              alignment: Alignment.center,
              child: BottomNavigationBar(
                backgroundColor: Colors.grey, //Todo:remove
               // backgroundColor: Color(0xffF7F3ED),
                selectedFontSize: 0,
                showSelectedLabels: false,
                showUnselectedLabels: false,
                type: BottomNavigationBarType.fixed,
                key: bottomNavGlobalKey,
                onTap: onTabTapped,
                currentIndex: watch(tabviewProvider).currentBottomNavIndex,
                items: [
                  BottomNavigationBarItem(
                    activeIcon: BottmNavTabButton(
                      isActive: true,
                      imgPath: 'assets/icons/icon_timeline_pink.svg',
                      lableText: 'A',
                    ),
                    label: '',
                    icon: BottmNavTabButton(
                      isActive: false,
                      imgPath: 'assets/icons/icon_timeline_gray.svg',
                      lableText: 'A',
                    ),
                  ),
                  BottomNavigationBarItem(
                    activeIcon: BottmNavTabButton(
                      isActive: true,
                      imgPath: 'assets/icons/icon_knowledge_pink.svg',
                      lableText: 'B',
                    ),
                    label: '',
                    icon: BottmNavTabButton(
                      isActive: false,
                      imgPath: 'assets/icons/icon_knowledge_gray.svg',
                      lableText: 'B',
                    ),
                  ),

                  BottomNavigationBarItem(
                    activeIcon: BottmNavTabButton(
                      isActive: true,
                      imgPath: 'assets/icons/icon_offer_pink.svg',
                      lableText: 'C',
                    ),
                    label: '',
                    icon: BottmNavTabButton(
                      isActive: false,
                      imgPath: 'assets/icons/icon_offer_gray.svg',
                      lableText: 'C',
                    ),
                  )
                ],
              ),
            ),
          ),
        );
Shashiwadana
  • 492
  • 1
  • 8
  • 16

1 Answers1

0

To achieve your desired behavior I would set SafeArea bottom propriety to false & wrap each of your icons with a Padding()

SafeArea(
  bottom: false,
  child: …,
)

Padding(
  top: value, 
  bottom: value, 
  child : BottmNavTabButton(…),
)
Shun Min Chang
  • 868
  • 7
  • 13
Aristidios
  • 1,921
  • 2
  • 13
  • 24
  • I tried it and seems like it doesn't solve the issue. – Shashiwadana Sep 01 '21 at 07:09
  • It does not remove SafeArea as you need it on iOS devices but it allows you to set some desired top padding for it to look better - if you look at facebook or Apple Store app the bottomnavbar looks like this – Aristidios Sep 01 '21 at 07:39