I am trying to create a BottomNavigationBar, the problem is that if 3 buttons are inserted, the name of the button appears, but when I try to accommodate 4 or more buttons in the bar, the name stops appearing. The objective is that when arranging 4 or more buttons in a bar, the name of the button/icon appears.
For example with three buttons in Bar:
attached code
class _BotonBarraNavegacionState extends State<BotonBarraNavegacion> {
int _selectedIndex = 0;
List<Widget> _widgetOptions = <Widget>[
BotonInicio(),
Favorito(),
ProfilePage(),
Add(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
showSelectedLabels: true,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: Colors.blue,
size: 30,
),
title: Text('Inicio'),
activeIcon: Icon(
Icons.home,
color: Colors.red,
size: 30,
),
),
....
],
onTap: (index) {
setState(() {
_selectedIndex = index;
});
},
),
body: _widgetOptions.elementAt(_selectedIndex),
);
}
}
}
It
bottomNavigationBar
has a property that allows you to fix or choose the type you want the navigation bar to be, among these properties isBottomNavigationBarType.fixed
, place that inside the Widget and the name of the button should appear:To get the text to display correctly use the property
label
on each of yourBottomNavigationBarItem
, in fact the propertytitle
is deprecated and you shouldn't use it, you should use it nowlabel
as it allows for improved text scaling.If you now want the icon texts to be displayed at the same time use the type: property
BottomNavigationBarType.fixed
in yourBottomNavigationBar
: