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

Widgets BottomNavigationBar

33/38
Recursos

El BottomNavigationBar es un widget muy común para la navegación principal a través de las diferentes pantallas o vistas de nuestra aplicación. Al igual que el FloatingActionButton(), y como responderá a la interacción con el usuario, al BottomNavigationBar() le corresponde heredar de la clase StatefulWidget.

Para definir las características de la apariencia que tendrá este widget, lo envolveremos a su vez en un widget de tipo Theme() y le asignaremos finalmente el widget BottomNavigationBar() a la propiedad child.

Aportes 23

Preguntas 4

Ordenar por:

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

En el ejemplo anterior puse que notificara en el SnackBar cada vez que se agregaba o quitaba de Favoritos. Si se realizan dos acciones cualquiera pero que ambas van a mostrar un mensaje en SnackBar por default va a esperar que se vaya la primer SnackBar para mostrar la segunda.
Se puede corregir ese efecto eliminando la SnackBar actual (si hubiera una), antes de enviar la nueva.

Otro método podría ser reducir la duración del SnackBar con la propiedad “duration”

    final contextScaffold = Scaffold.of(context);
    
    contextScaffold.removeCurrentSnackBar();
    contextScaffold.showSnackBar(SnackBar(
      content: this._pressedFav ? Text("Agregado a Favoritos!") : Text("Imagen quitada de Favoritos."),
    ));```

Para la nueva versión de flutter el title dentro del BottomNavigationBar esta deprecado ahora hay que usar label: “texto”

title esta deprecado

ahora se usa ->

    BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: ""
            ),

Si no vamos a utilizar un texto en los items del bottom navigation bar, les recomiendo usar Container(height: 0.0,) en lugar de Text("") y así los iconos quedan centrados en la barra.

En este punto hay muchos archivos en la carpeta lib donde estamos guardando todo nuestro código dart y lo ideal seria organizarlos.
¿Existe algún estándar/guía para organizar los archivos de esta carpeta?

genial, va quedando muy bueno! Excelente…

Chicosssss. Debido a lo desactualizado del curso, hay algunas cosas que no van a funcionar. Una de ellas es el primaryColor que utilizamos para cambiar el color especificamente a la barra de navegacion. En vez de poner

primaryColor: Colors.red,

tienen que poner:

colorScheme: ColorScheme.light().copyWith(primary: Colors.red,),

Sufri bastante a la hora de buscar esto, ya que no lo muestra como error, o comando depreciado o algo asi, solamente buscando consulta oficial de los desarrolladores de flutter se logra tener este dato.

Para que lo temen en cuenta 👇🏻😊

title → Widget
The title of the item. If the title is not provided only the icon will be shown when not used in a Material Design BottomNavigationBar. […]
@Deprecated('Use “label” instead, as it allows for an improved text-scaling experience. ’ ‘This feature was deprecated after v1.19.0.’), final

HOLA PUEDEN REVISAR LOS ENLACES NO PUEDO DESCARGAR LOS ARCHIVOS GRACIAS

Una duda, por ejemplo al correr la app en el dispositivo físico android, me aparecen una franja amarilla como un warning por así decir:

Esto se debe modificar directamente en la carpeta Android e ir a los layout xml para editarlos?

O se debe corregir en los widgets, recuerdo que en Android había que crear cada carpeta para distintas resoluciones, acá será lo mismo?

Saludos

Hola! Si quieren que el texto en el snackBar cambie si ya fue presionado o no podrían adquirir el siguiente código:

void onPressedFav() {
    setState(() {
      presionado = !this.presionado; // Siendo esta la bandera que cambia por cada tap.

      Scaffold.of(context).hideCurrentSnackBar(); // Se oculta el snackBar anterior en caso de que haya.

      if (this.presionado == true) {
	// Si se presiona y se activa entonces el mensaje es de agregar
        Scaffold.of(context)
            .showSnackBar(SnackBar(content: Text("Agregado a Favoritos")));
      } else {
	// Caso contrario, se muestra el mensaje siguiente
        Scaffold.of(context)
            .showSnackBar(SnackBar(content: Text("Eliminado de Favoritos")));
      }
    });
  } 

// Luego aqui cambia el estado recuerden!
@override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Me Gusta",
      child: Icon(this.presionado ? Icons.favorite : Icons.favorite_border),
      onPressed: onPressedFav,
    );
  }

Bueno estoy de maravilla con este lenguaje, espero con ansias el curso avanzado!

Genial 😃

Genial, flutter es increíble

Genial! 😉

Tengo una duda cuando todo esta bien cuando le doy click al icono(corazon) pero luego hago un scroll y cuando regreso a la imagen ya no esta el icono marcado

¡Qué lindo va quedando! Definitivamente hay que seguirle aportando al desarrollo con este SDK, para ir adelantados cuando llegue Fuchsia 😛

las listas de review_list solo me salen 2 imagenes y puse 4 ah que se deben ?

Respecto al reto de cambiar el icono dejo mi aporte

class _FloatingActiobButtonGreenState extends State<FloatingActiobButtonGreen> {
  var icono = Icons.favorite_border;
  var inicial = 1;
  var texto = "";
  void onPressedFav() {
    setState(() {
      if (inicial > 0) {
        icono = Icons.favorite;
        texto = "Agregaste a tus favoritos";
      } else {
        texto = "Quitaste de tus favoritos";
        icono = Icons.favorite_border;
      }
    });
    Scaffold.of(context).removeCurrentSnackBar();
    Scaffold.of(context).showSnackBar(SnackBar(content: Text(texto)));

    inicial *= -1;
  }

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      backgroundColor: Color(0xFF11DA53),
      mini: true,
      tooltip: "Fav",
      onPressed: onPressedFav,
      child: Icon(icono),
    );
  }
}

Hola Anaí como estas ? una consulta, como puedo tener emulador de iOS en android studio desde windows ? para hacer pruebas tanto en android como en iOS. Gracias quedo atento.

Mi solucion al context de Agregado a favorito o eliminado:

void onPressedFav() {
    setState(() {
      _pressed = !this._pressed;                                                   
      Scaffold.of(context).showSnackBar(SnackBar(
        content:
            this._pressed                                                             
                ? Text("Added to favorites")
                : Text("Removed from favorites"),
      ));
    });
  }

class _PlatziTrips extends State<PlatziTrips>{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.white,
primaryColor: Colors.purple
),
child: BottomNavigationBarItem(
icon: Icon(Icons.home),
),
),
);
throw UnimplementedError();
}

Me aparece hoy que el tipo BottomNavigationBarItem no puede ser asignado a un type Widget y que el title ha sido depreciado en esta version