Multi-line title in BottomNavigationBarItem

Issue

I am using BottomNavigationBarItem to display items in my BottomBar. Now my Problem is, that the content of my title is too long and is not properly displayed. See here:

Is there a canonical alternative on how to fix it? Or do I have to build my own custom BottomNavigationBarItem?

Thanks alot!

edit:
My code (not really interesting) looks like this:

BottomBar(onTabTapped, currentIndex, context) {
    this.onTap = onTabTapped;
    this.currIndex = currentIndex;

    items = <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.dashboard),
        label: AppLocalizations.of(context).bottomBarDashboard,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.book),
        label: AppLocalizations.of(context).bottomBarMyArticles,
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.account_circle),
        label: AppLocalizations.of(context).bottomBarProfile,
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(elevation: 2.0, selectedItemColor: Theme.of(context).primaryColor, items: items, onTap: onTap, currentIndex:
    currIndex);
  }

Solution

Option 1 : If the text is static you can use new line. Like first line \n second line.
Option 2. The icon can take any widget so you can use a column in the icon and differentiate active and inactive icon using icon and activeIcon and ignore the label.

Answered By – Kaushik Chandru

Answer Checked By – Senaida (FlutterFixes Volunteer)