1

Estoy intentando crear un BottomNavigationBar, el problema es que si se insertan 3 botones si aparece el nombre del botón, pero al intenat acomomdar 4 o mas botones en la barra deja de aparecer el nombre. El objetivo es que al acomodar 4 o mas botones en barra, aparezca el nombre del boton/icono.

Por ejemplo con tres botones en Barra: BottomNavigationBar con tres botones

Con 4 botones en Barra BottomNavigationBar con cuatro botones

Adjunto codigo

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

}




 }

2 respuestas 2

1

El bottomNavigationBar tiene una propiedad que te permite arreglar o escoger el tipo que quieres que sea la barra de navegación, entre estas propiedades esta BottomNavigationBarType.fixed, coloca eso dentro del Widget y debería aparecerte el nombre del botón:

BottomNavigationBar(
    type: BottomNavigationBarType.fixed, //Agregar esta línea
    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;
      });
    },
  ),
1
  • Funciono, Gracias
    – devae
    Commented el 16 mar. 2022 a las 20:07
0

Para que se muestre el texto correctamente, usa la propiedad label en cada uno de tus BottomNavigationBarItem, de hecho la propiedad title es obsoleta y no deberías usarla, ahora debes usar label ya que permite una escala de texto mejorada.

   BottomNavigationBarItem(
        icon: Icon(
          Icons.home,
          color: Colors.blue,
          size: 30,
        ),
        //title: Text('Inicio'),
        activeIcon: Icon(
          Icons.home,
          color: Colors.red,
          size: 30,
        ),
        label: 'Inicio',
      ),
      ...
      ...

introducir la descripción de la imagen aquí

Si ahora deseas que se muestren los textos de los iconos al mismo tiempo usa la propiedad type: BottomNavigationBarType.fixed en tu BottomNavigationBar:

BottomNavigationBar(
    type: BottomNavigationBarType.fixed, 
    ...
    ...

introducir la descripción de la imagen aquí

1
  • Cierto, la propiedad title es obsoleta, debemos usar label. Gracias
    – devae
    Commented el 21 mar. 2022 a las 21:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.