flutterflutter-bottomnavigation

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!

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

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