How do I align the elements of the TabBar in flutter?

Question

I have a tab/navigation bar with three options. The icons in it however are not aligned in the middle. The icons look aligned on other devices but not on iPhones. They appear to be pushed a little upwards for some reason.

  Widget _bottomNavigationBar(int selectedIndex) => 
        Container(
            height: 90,
                decoration: BoxDecoration(
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(52.0),
                  topRight: Radius.circular(52.0)),
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black.withOpacity(0.5),
                  offset: Offset(-5, 5),
                  blurRadius: 20,
                ),
              ],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(52.0),
                  topRight: Radius.circular(52.0)),
              child: BottomNavigationBar(
                selectedItemColor: Color(0xFFFE524B),
                unselectedItemColor: Color(0xFFFF8C3B),
                onTap: (int index) => setState(() => _selectedIndex = index),
                currentIndex: selectedIndex,
                items: const <BottomNavigationBarItem>[
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.home,
                        size: 28,
                      ),
                      title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.game_controller,
                        size: 28,
                      ),
                      title: Text('')),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.wallet,
                        size: 28,
                      ),
                      title: Text('')),
                ],
              ),
            )); 

Thank you for your help!

Answer 1

That is happening because of the 'title' in the bottom nav bar. Basically it is rendering a Text widget with an empty string. Not seen as its empty but its taking the space.

Good thing is that the title property in the BottomNavBar class takes a widget, so, you can pass any widget to it.

I'd suggest passing a Padding widget with zero padding, or maybe a Container with a zero height. Implementation can look as follows:

BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.home,
                        size: 28,
                      ),
                      title: Padding(padding: EdgeInsets.all(0.0))),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.game_controller,
                        size: 28,
                      ),
                      title: Padding(padding: EdgeInsets.all(0.0))),
                  BottomNavigationBarItem(
                      icon: Icon(
                        Entypo.wallet,
                        size: 28,
                      ),
                      title: Padding(padding: EdgeInsets.all(0.0))),
                ],
              ),