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