Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: bottomNavigationBar item padding with text and label

The aim is to create a vertical padding for the BottomNavigationBarItem which encompasses both the label and icon. Currently, when I add the Padding, it creates padding for the entire bottomNavigationBar and I require it like the picture present below.

Aim:

enter image description here

The current output looks like this with 0 Padding:

enter image description here

Here is the code that is with 0 padding on the child:

  Widget bottomNavigationBar() {
    return SizedBox(
      height: 65,// <---- This needs to be dynamic and not hard coded per se
      child: Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Color(0x40000000), // 000000 with 28% opacity
              spreadRadius: 0,
              blurRadius: 4, 
              offset: Offset(0, 0), // changes position of shadow
            ),
          ],
        ),
        child: BottomNavigationBar(
          selectedItemColor: Color(0xFFffc107),
          unselectedItemColor: Color(0xFF666666),
          showSelectedLabels: true,
          selectedFontSize: 16,
          selectedLabelStyle: TextStyle(
            color: Color(0xFFFFC107),
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.w600,
          ),
          unselectedLabelStyle: TextStyle(
            color: Color(0xFF666666),
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.w600,
          ),
          unselectedFontSize: 16,
          showUnselectedLabels: true,
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          onTap: _onItemTapped,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home_outlined),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.campaign_outlined),
              label: 'What's new?',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.favorite_border),
              label: 'Favourites',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.account_circle_outlined),
              label: 'Account',
            ),
          ],
          backgroundColor: Color(0xFFFAFAFA),
        ),
      ),
    );
  }

Edit: Updated the code as it needed Shadow and added it in Sizedbox as per the suggestions below in the post. Added comments too for the height which is hard coded.

Tags:

2

Answers


  1. 0

    Instead of using the label, use amColumn as an icon or Padding for icon only. This is Widget type, not icon.

    Login or Signup to reply.
  2. 0

    update your widget like below –

      Widget bottomNavigationBar() {
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 16),
      color: const Color(0xFFFAFAFA),
      child: BottomNavigationBar(
        elevation: 0,
        items: [
       ...
        ],
      ),
    );
  }

    Output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search