Añadiendo Scaffold al escaparate de la tienda
Ejercicio
Lo primero que debemos hacer es descargar el proyecto base sobre el que tendremos que añadir el Scaffold. Aunque el proyecto está compuesto de varias partes, algunas que ya conocemos de ejercicios anteriores y otras nuevas, vamos a centrarnos en la carpeta features/tienda.
Podemos ver que tenemos una TiendaScreen que si ejecutamos la aplicación veremos que muestra todos los productos de la tienda con un LazyVerticalGrid que está incluido dentro del componente Escaparate de componets.
Vemos que no hay ningún Scaffold envolviendo el Escaparate ni ningún AppBar. La finalidad es añadir los elementos necesarios en TiendaScreen para conseguir un resultado como el que se muestra en la imagen de la derecha.
Como se puede ver hay un NavigationBar en la parte inferior del Scaffold y un TopAppBar
✋ tanto el código para la NavigationBar como para la TopAppBar deberán estar dentro del paquete components.
En la TopAppBar podemos ver dos iconos, uno de búsqueda y uno que abrirá un menú como el siguiente:
Además al pulsar sobre el icono de búsqueda, se mostrará en la TopAppBar un SearchBar dependiendo del state estaFiltrando, al pulsar sobre la X cambiará el state estaFiltrando.
Aunque el código se pasará como recurso en posteriores entregas, se podrá ampliar el ejercicio dándole funcionalidad a los elementos añadidos:
- Funcionalidad del icono favoritos, para que haga un filtrado de los artículos que aparecen en la lista de id de favoritos del cliente, para ello fíjate como están codificados los eventos OnClickListarFavoritos y OnClickFavoritos.
- Funcionalidad del icono casa, que mostrará todos los artículos.
- Funcionalidad de incrementar el número del carrito al añadir a carrito (click sobre un artículo permite añadir a carrito), que usa el evento OnClickAñadirCesta.
- Funcionalidad del carrito, que mostrará el contenido del componente Carrito, que se activará o no con un boolean a través del evento OnClickCarrito.
- Funcionalidad del filtrado de los artículos al introducir texto en la SearchBar. Por ejemplo, si se introduce la palabra rojo, se mostrarán los artículos que contengan rojo en la descripción. Evento OnClickFiltrar.