Multi-line title in BottomNavigationBarItem

Question

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);
  }

may be use `Meine Premium \n sample text` also paste some code,it will really helpful and easy — Abhijith, Aug 04 '21 at 10:01
Checkout this https://stackoverflow.com/questions/55076876/controlling-on-tap-text-large-size-in-flutter-bottom-navigation-bar — Abhijith, Aug 04 '21 at 10:02
checkout this https://github.com/material-components/material-components-ios/issues/6955 — M Karimi, Aug 04 '21 at 10:07
@MKarimi Yeh, I've seen this issue too. But this is for native iOS I believe. — progNewbie, Aug 04 '21 at 10:08
The bar seems quite straightforward. I'd recreate one with Rows and Columns: Row, 3 Columns, each colum having 2 rows, one with Icon and another with Text. And use SizedBox to control heigth — Maxim Saplin, Oct 26 '21 at 18:27
@progNewbie I recommend using a custom bottomBar, here I have an example of one. 5 minutes and you understand and change it however you want. https://snipsave.com/user/tarlisonbrito/snippet/TCSvFVU29UtXCQtC3D/ — Tarlison Sander, Oct 26 '21 at 20:10

score 3 · Answer 1 · edited Dec 18 '22 at 04:50

3

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.

edited Dec 18 '22 at 04:50

ruleboy21

5,510
4
17
34

answered Oct 25 '21 at 22:06

Kaushik Chandru

15,510
2
12
30

Meet Patel · Answer 2 · 2021-10-27T09:57:51.833

1

Here My answer can help you..

selectedLabelStyle: TextStyle(overflow: TextOverflow.visible),

    // make overflow visible if you want approach like shown in image.

// see this image.

edited Oct 27 '21 at 09:57

answered Oct 27 '21 at 09:52

Meet Patel

189
9

score 0 · Answer 3 · answered Oct 26 '21 at 20:34

Use RichText with empty label

            RichText(
              textAlign: TextAlign.center,
              text: const TextSpan(
                style: TextStyle(color: Colors.black),
                children: [
                  TextSpan(text: 'Meine\n'),
                  TextSpan(text: 'downloaded-items'),
                ],
              ),
            ),

Final example:

      BottomNavigationBarItem(
        icon: Column(
          children: [
            const Icon(Icons.save_alt_rounded),
            RichText(
              textAlign: TextAlign.center,
              text: const TextSpan(
                style: TextStyle(color: Colors.black),
                children: [
                  TextSpan(text: 'Meine\n'),
                  TextSpan(text: 'downloaded-items'),
                ],
              ),
            ),
          ],
        ),
        label: '',
      ),

score 0 · Accepted Answer · answered Nov 21 '22 at 13:37

I wrote a package myself. It is called Responsive_Bottom_Bar. This scales the Textsize of the title and uses multi-line titles.

https://pub.dev/packages/responsive_bottom_bar

You can use it like this:

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: Text("hello world: $currentIndex"),
          bottomNavigationBar: ResponsiveBottomBar(
              items: const [
                BottomBarItem(
                    title: "This is a very long title Yooo",
                    iconData: Icons.add_box),
                BottomBarItem(
                    title: "Wer sich",
                    iconData: Icons.share),
                BottomBarItem(
                    title: "jetzt noch",
                    iconData: Icons.star_rate),
                BottomBarItem(
                    title: "umdreht ist",
                    iconData: Icons.library_add),
                BottomBarItem(
                    title: "selber schuld :)",
                    iconData: Icons.pages_rounded),
              ],
              currentIndex: currentIndex,
              onTap: (int index) {
                setState(() {
                  currentIndex = index;
                });
              })),
    );
}

score -1 · Answer 5 · answered Aug 04 '21 at 10:28

-1

You can use title instead of label, although it deprecated.

title:  Flexible(
            child: Text("Meine Premium",
                maxLines: 3),
          ),

answered Aug 04 '21 at 10:28

M Karimi

1,991
1
17
34

Multi-line title in BottomNavigationBarItem

5 Answers5