CODEWITHSUNDEEP
flutterdartflutter-layout
Dennis Ashford
Dennis Ashford

Reputation: 1400

Flutter: Bottom Navigation Bar Cutting off Label Text

I have a BottomNavigationBar where everything is working properly except it is cutting off the text on the 'Notifications' label. It appears to cut the label text at 13 characters. No matter how small I make the font with selectedFontSize of where I put the lab in the nav bar, it still cuts it off and gives 'Notificati...'. Is there a way to fix this? See image below for the result from the code.

const Map<int, String> tabName = {
  0: 'Feed',
  1: 'Challenges',
  2: '',
  3: 'Invite',
  4: 'Notifications',
};

Map<int, Widget> tabIcon = {
  0: Icon(
    Icons.home_outlined,
    size: 32.sp,
  ),
  1: Padding(
    padding: EdgeInsets.only(top: 4, bottom: 4),
    child: FaIcon(
      FontAwesomeIcons.trophy,
      size: 23.sp,
    ),
  ),
  2: Icon(
    Icons.add_box_outlined,
    size: 35.sp,
  ),
  3: Icon(
    Icons.person_add,
    size: 30.sp,
  ),
  4: Icon(
    Icons.notifications_active,
    size: 30.sp,
  ),
};

Widget build(BuildContext context) {
    return BottomNavigationBar(
      backgroundColor: Color(0xFF1E1E24),
      selectedItemColor: FlutterFlowTheme.primaryColor,
      unselectedItemColor: Colors.white,
      showSelectedLabels: true,
      showUnselectedLabels: true,
      type: BottomNavigationBarType.fixed,
      selectedFontSize: ,
      items: [
        _buildItem(tabItem: 0),
        _buildItem(tabItem: 1),
        _buildItem(tabItem: 2),
        _buildItem(tabItem: 3),
        _buildItem(tabItem: 4),
      ],
      onTap: (index) => onSelectTab(index),
      currentIndex: currentTab,
      // selectedItemColor: AppColors.addEntryColor!,
    );
  }

BottomNavigationBarItem _buildItem({int tabItem}) {
    return BottomNavigationBarItem(
      icon: _tabSelected(tabItem),
      label: tabName[tabItem],
    );
  }

  Widget _tabSelected(item) {
    if (item == 4) {
      return getNotificationIconWithBadge();
    } else {
      return tabIcon[item];
    }
  }

enter image description here

Upvotes: 0

Views: 1406

Answers (1)

Lalit Fauzdar
Lalit Fauzdar

Reputation: 6363

TextOverflow.Ellipsis is the acting agent here which works when the width of the label increases the available width, which is based on the number of items of the BottomNavigationBar. To force the label to be visible completely irrespective of the available width, you can use TextOverflow.visible as:

 return BottomNavigationBar(
      ...
      //Setting it to visible will make the label text visible completely
      selectedLabelStyle: const TextStyle(overflow: TextOverflow.visible),
      unselectedLabelStyle: const TextStyle(overflow: TextOverflow.visible),
    );

In your example:

 return BottomNavigationBar(
      backgroundColor: Color(0xFF1E1E24),
      selectedItemColor: FlutterFlowTheme.primaryColor,
      unselectedItemColor: Colors.white,
      showSelectedLabels: true,
      showUnselectedLabels: true,
      type: BottomNavigationBarType.fixed,
      selectedFontSize: ,
      items: [
        _buildItem(tabItem: 0),
        _buildItem(tabItem: 1),
        _buildItem(tabItem: 2),
        _buildItem(tabItem: 3),
        _buildItem(tabItem: 4),
      ],
      onTap: (index) => onSelectTab(index),
      currentIndex: currentTab,
      // selectedItemColor: AppColors.addEntryColor!,
      selectedLabelStyle: const TextStyle(overflow: TextOverflow.visible),
      unselectedLabelStyle: const TextStyle(overflow: TextOverflow.visible),
    );

But, point to remember is if there's not enough width and you force the label to be shown completely, it will break in multiple lines as in the image below:

enter image description here

Upvotes: 1

Related Questions