Multi-line title in BottomNavigationBarItem


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:

enter image description here

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

Thanks alot!

My code (not really interesting) looks like this:

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

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

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


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)

Leave a Reply

Your email address will not be published. Required fields are marked *