Flutter BottomNavigationBar - Multi-line for label?

Viewed 575

I have attached below an image of BottomNavigationBarItem. As you can see here, it's showing ellipsis for long text. I want to show this label in two lines. How can I achieve this? Any idea?

Note: There is a property named unselectedLabelStyle for BottomNavigationBar. I tried to use that also.

enter image description here

// ...
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: selectedIndex!,
      type: BottomNavigationBarType.fixed,
      onTap: onItemSelected,
      items: [
        BottomNavigationBarItem(
          icon: _bottomNavIcon(
            Icons.home,
            color: ColorsX.lightGrey),
          activeIcon: _bottomNavIcon(Icons.home_filled),
          label: "Self Assessment"
        )
      ]
    );
  }
// ...
1 Answers

just add \n in your label

Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: selectedIndex!,
      type: BottomNavigationBarType.fixed,
      onTap: onItemSelected,
      items: [
        BottomNavigationBarItem(
          icon: _bottomNavIcon(
            Icons.home,
            color: ColorsX.lightGrey),
          activeIcon: _bottomNavIcon(Icons.home_filled),
          label: 'I am \n multi \n line'
        )
      ]
    );
  }
Related