Héctor Álvarez
Actualmente poseemos dos pantallas (Example y Heroes Page).
Nuestro MaterialApp sólo soporta un home, por lo que necesitamos un mecanismo para navegar entre las pantallas.
MaterialApp nos entrega meganismos para observar cambios en las rutas y para entregar un nuevo widget dependiendo de la ruta
En esta clase trabajaremos con rutas, navegar entre rutas y crearemos un flujo base desde un splash, carga y pantalla se login.
RouteObserver es un navegador que notifica un cambio de estado en el sistema de Rutas.
Debemos suscribirnos desde MaterialApp para poder estar al tanto de los cambios de rutas.
Podemos notificar un cambio de nueva ruta con la clase Navigator.
SystemChrome nos permite interactuar con algunos elementos gráficos del sistema operativo
Utilizaremos una de sus funciones (setSystemUIOverlayStyle), que nos permite cambiar el estilo de la barra de status.
Para continuar crearemos las siguientes pantallas:
splash
loading
login
home
Modificar estas pantallas y agregar también las rutas a nuestro router_app.dart y pages.dart.
Para ahorrar tiempo, descarguen y descompriman las pantallas en la carpeta lib/app/pages
Crearemos en nuestra carpeta de assets una nueva carpeta para recursos de imágenes.
Pueden descargarlos desde acá, una vez descargado deben descomprimirlo en la carpeta de assets.
Tendremos que agregar las rutas de assets en pubspec.yaml y crear un nuevo archivo de recursos para obtener las rutas de assets desde constantes estáticas (Como con las rutas de pantallas).
Modificaremos nuestro splashpage para que cumpla con algunas funciones básicas.
Utilizaremos widgets como Container e Image, también veremos como utilizar el ImageProvider AssetImage.
Crearemos una función en el controlador para ir automáticamente a la siguiente pantalla.
En la pantalla de carga podemos obtener elementos necesarios para precarga de datos, detectar si el usuario está loggeado o si tiene elementos desactualizados.
Utilizaremos tres formas para mostrar una supuesta carga:
CircularProgressIndicator
Una imagen GIF
Una imagen estática aplicando efectos de rotación.
CircularProgressIndicator nos entrega un widget prefabricado para mostrar un elemento gráfico que nos indique la carga de un objeto, este widget es customizable tanto en color como en funcionalidad. Nos permite operar con cargas indefinidas o con cargas "determinadas" por un inicio y final.
Para utilizar animaciones, utilizaremos el Mixin SingleTickerProviderStateMixin a modo de reloj, nos permite conectarlo con Animation controller en la pantalla actual y capturar el tiempo transcurrido entre frames.
La pantalla de lógin tendrá varios Widgets que interactuarán entre ellos y se construiran en multiples capas de columnas.
El primer widget a ver es SingleChildScrollView que nos permite crear una pantalla deslizable similar a ListView pero que se enfoca en widgets grandes o customizados.
Veremos al widget Container, que nos da un widget muy versátil para construir elementos con su propio estilo.
Utilizaremos formularios con el Widget Form, junto a los inputs con TextFormField y utilizaremos sus validadores agregando controlador.
Finalmente llamaremos a la acción con un botón con el widget ElevatedButton.