Héctor Álvarez
Taller tecnologías móviles
NavigationBar y Drawer
Esquema de la clase
- Introducción
- Edición de Home
- NavigationBar
- Drawer
Introducción
Nuestra aplicación ya posee un flujo básico desde el SplashPage hasta la pantalla de Login.
En esta clase no enfocaremos en agregar algunos widgets a nuestra pantalla de Home, en primer lugar utilizaremos NavigationBar, un widget que nos permite incluir cuantas pantallas queramos de manera centralizada, permitiendonos movernos entre estas sin necesidad de utilizar las rutas.
También utilizaremos Drawer, que nos permite realizar un menú deslizable en el cual podemos tener opciones para ir a otras pantallas y los datos básicos de nuestro usuario.
BottomNavigationBar
BottomNavigationBar es un widget que se muestra en la parte inferior de la pantalla y nos permite seleccionar un pequeño número de vistas.
Necesitamos enviarle una lista de widgets, la cual mostraremos mediante su índice, como un array de vistas.
Algo a tener en cosideración es que debemos cuidar bien de la llave de cada pantalla, ya que algunas veces puedn interferir entre ellas bloqueando que algunos widgets puedan actualizarse.
BottomNavigationBar modificar controller/h3>
Modificar HomePage y agregar el menú
BottomNavigationBar
Drawer
Drawer es un widget que nos permite mostrar un panel deslizable en nuestro Scaffold.
Descargaremos la pantalla base desde aquí y lo descomprimimos en nuestra carpeta lib/app/pages.
Drawer
Drawer
Drawer
Drawer
Ahora le daremos un poco de vida a nuestro menú.
Para ello agregaremos algunas opciones (vacías por ahora) y estilo a nuestro menú.
Drawer
Drawer
