Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Flutter

Curso de Flutter

Anahí Salgado Díaz de la Vega

Anahí Salgado Díaz de la Vega

Generando Navegación en BottomNavigationBar

34/38
Recursos

Para completar el funcionamiento de nuestro BottomNavigationBar definiremos el método onTapTapped() que contendrá la lógica para la navegación entre las diferentes vistas de nuestra aplicación como respuesta a la interacción con el usuario, y que estará asignada a la propiedad onTap.

Para controlar el cambio de vistas nos valemos precisamente de la condición de mutabilidad del widget modificando la variable indexTap con la función setState(), fijándola en el valor del índice que recibe el método onTapTapped() como parámetro y que hace referencia a la posición del BottomNavigationBarItem que fue presionado. Al asignar el valor de este índice a la propiedad currentIndex automáticamente se cambiará de vista producto del comportamiento reactivo de este tipo de widgets con estado.

Aportes 23

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

en versiones nuevas de flutter (2020) se utiliza label en lugar de title y para ocultarlos debemos utilizar las propiedades marcas en la imagen, de esa manera los iconos se acomodan correctamente y no quedan mas arriba como si tuvieran texto abajo

Así va quedando: ¡Golden Boys BARBERSHOP!

Sin querer ya tengo una noción de como hacer una app básica, sin duda me será de ayuda 😃

Llegar a este punto y que todo valla segun lo planeado es muy emocionante.

Generando una lista de Widget se podría solucionar la cantidad de estrellas completas, medias o vacías que vimos en las clases anteriores, o hay una mejor manera para ello?

Aún me hace falta hacerle cambios a la tipografía más que nada, pero ya me va gustando más

Ayuda mi bottomNavigationBar sale así,

![](

pero mi codigo esta teoricamente bien:

 return Scaffold(
        body: widgetsChildren[index],
        bottomNavigationBar: Theme(
          data: Theme.of(context).copyWith(
            canvasColor: Colors.white,
            primaryColor: Colors.purple
          ),
          child: BottomNavigationBar(
            onTap: onTapTapped,
            currentIndex: index,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.settings),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  title: Text("")
              )
            ],
          ),
        ),

Alguien sabe si hay algun repositorio en github donde este le proyecto?


.

.

tambien se puede trabajar asi

    final tabs = [
      HomeTrips(),
      SearchTrips(),
      ProfileTrips()
    ];
          return CupertinoTabView(
            builder: (BuildContext context) => tabs[index],
          );

Si les sucede como a mi que Theme no está aplicando el color morado a los iconos del bottom navigation bar, pueden asignarles colores y comportamientos agregando estos parametros en el widget BottomNavigationBar.

BottomNavigationBar(
          onTap: onTapTapped,
          currentIndex: indexTap,
          selectedItemColor: Colors.deepPurple,
          unselectedItemColor: Colors.deepPurpleAccent,
)

Una pestaña en inglés es “tab”, pienso que el método quedaría mejor: onTabTapped o quizás mejor onTabSelected. Pareciera sin mucha importancia, pero nombrar bien los methods es una buena práctica de arquitectura, pensando en el trabajo en equipo.

Hasta el momento todo bien, 😁

Se ve tan genial tener ambos emuladores con las apps funcionandos hasta este paso! 🤩

Por qué cuando se hace slide hacia abajo no se oculta la lista de arriba?

El mejor curso

excelente cursooo

Un excelente curso

Hola como estan , tengo el siguiente error cuando navego entre las pestañas del profile y search.

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following Container object was thrown building SearchTrips(dirty):
Container(bg: MaterialAccentColor(primary value: Color(0xffffd740)))

The relevant error-causing widget was:
SearchTrips file:///C:/Users/Lenovo/AndroidStudioProjects/platzi_trips_app/lib/platzi_trips.dart:23:7
When the exception was thrown, this was the stack:
#0 SearchTrips.build (package:platzi_trips_app/search_trips.dart:7:5)
#1 StatelessElement.build (package:flutter/src/widgets/framework.dart:4576:28)
#2 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4502:15)
#3 Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5)
#4 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4481:5)

Para agregar mas de tres iconos

child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed, //Cambiamos el tipo de la barra de navegación a fixed
            onTap: onTapTapped,
            currentIndex: indexTap,
              items: [
                BottomNavigationBarItem(
                    icon: Icon(Icons.home),
                    title: Text("")
                ),
                BottomNavigationBarItem(
                    icon: Icon(Icons.search),
                    title: Text("")
                ),
                BottomNavigationBarItem(
                    icon: Icon(Icons.place),
                    title: Text("")
                ),
                BottomNavigationBarItem(
                    icon: Icon(Icons.notifications),
                    title: Text("")
                ),
                BottomNavigationBarItem(
                    icon: Icon(Icons.person),
                    title: Text("")
                ),
              ])