0

El BottomNavigationBar de mi aplicacion se muestra bien en pantallas pequeñas-normales pero al momento de querer probar en pantallas mas grandes me salta un error en las dimensiones. El problema es el sizedbox, ya hice el cambio por un flexible y por un expanded pero la pantalla se me queda en blanco y me da errores, y si le incremento al height a 95 deja de aparecer el error pero en pantallas mas chicas se muestra un bottomnavigatorbar demasiado grande. Este es mi codigo.

    class _HomeScreenState extends State<HomeScreen> {
  int pageIdx = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: pageIdx,
        children: pages,
      ),
      bottomNavigationBar: SizedBox(
        height: 55, //error aqui al probar en otras pantallas
        child: BottomNavigationBar(
          onTap: (idx) {
            setState(() {
              pageIdx = idx;
            });
          },
          type: BottomNavigationBarType.fixed,
          backgroundColor: Colors.black,
          selectedItemColor: const Color.fromARGB(255, 51, 95, 199),
          unselectedItemColor: Colors.white,
          currentIndex: pageIdx,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home, size: 18),
              label: 'Inicio',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search, size: 18),
              label: 'Busqueda',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.explore, size: 23),
              //icon: CustomIcon(),
              label: 'Descubrir',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.shopping_cart, size: 18),
              label: 'Productos',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person, size: 18),
              label: 'Perfil',
            ),
          ],
        ),
      ),
    );
  }
}

y me sale este resultado:

introducir la descripción de la imagen aquí

Pero al momento de ejecutar el mismo proyecto en una pantalla con mayor resolucion me sale una linea en el bottomnavigationbar:

introducir la descripción de la imagen aquí

Y en la terminal me aparece:

introducir la descripción de la imagen aquí

1
  • Lo mejor es leerse la doc y ver los ejemplos: api.flutter.dev/flutter/material/BottomNavigationBar-class.html Como puedes comprobar, ninguno de los ejemplos usa SizedBox ni nada de lo que has mencionado. Deberías dejar que el Widget tome el tamaño que necesite, debería bastar con poner únicamente el BottomNavigationBar sin que lo envuelva ningún otro widget.
    – Manuel
    Commented el 2 feb. 2023 a las 8:39

1 respuesta 1

3

Probaste quitando SizedBox, size, type: BottomNavigationBarType.fixed ya que son mas de 3 iconos y según su documentación

[BottomNavigationBarType.fixed] cuando hay menos de cuatro elementos de lo contrario [BottomNavigationBarType.shifting].

El BottomNavigationBar por defecto tiene iconSize = 24.0, si quieres modificar el tamaño de los iconos deberías agregar un valor a su propiedad iconSize

1
  • 1
    me sirvio, muchas gracias, normalmente lo hice así por que de ese modo me salia en algunos cursos que tomé, y como soy nuevo en flutter no encontraba muchas formas para modificar. mil gracias :) Commented el 2 feb. 2023 a las 21:06

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.