0

In my app I am using a BottomNavigationBar with icons and text for the items in it. In one of the items the text is too long and thus overflows. With the title property of the BottomNavigationBarItem I could easily control this with the overflow property of a Text widget. Now the title property is deprecated and we have to use the label property for the text, which is just a string and not a widget. Now I have to set the text overflow behavior differently, but I don't know how? I looked into both TextStyle and ThemeData widgets, but they do not seem to have properties that control text overflow. Is there a way to control text overflow while using the label property in a BottomNavigationBarItem?

PS: I know it is best to have no overflow at all, but custom color is translated in spanish to color personalizado and it seems like it cannot be any shorter.

The overflow I want and get using the title property:

enter image description here

The overflow I get when using label:

enter image description here

The code I am using right now with only one BottomNavigationBarItem because they're all basically the same:

BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.help),
      // label: getTranslated(context, "help"),
      title: Text(
        getTranslated(context, "help"),
        overflow: TextOverflow.fade,
        maxLines: 1,
        softWrap: false,
      ),
    ),
  ],
  type: BottomNavigationBarType.fixed,
  selectedItemColor: bottomBarSelected,
  unselectedItemColor: bottomBarUnselected,
  selectedFontSize: 12.0,
  unselectedFontSize: 12.0,
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  backgroundColor: secondaryColor,
)
Bram Dekker
  • 631
  • 1
  • 7
  • 19

1 Answers1

0

Yes that is a good question. I think you can not use the overflow like before, because it is not a way of using a navigationbaritem that is necessarily wanted. Labels on NavBarItem should be short, because in terms of user experience it is not optimal and the fact that we can not use anymore this overflow property is indeed a feature that goes away, but I think there is a reason for that, which is UX.

I think you will not be able to do what you want honestly.

Mathis Fouques
  • 174
  • 5