Aprende a temblar. Cómo construí el panel de control Covid-19 …… autor: Rupak Karki | Octubre de 2020

Ahora que presenté Flutter, por lo que incluso los principiantes pueden tener una idea de lo que estamos tratando de lograr al final, ahora podemos continuar y comenzar a construir nuestra aplicación.

Escenario

Comencé a investigar una API que pudiera usar. Había muchas API disponibles públicamente, pero estaba buscando una API simple cuyos datos JSON pudiera analizar fácilmente. Después de experimentar con varias API en Postman, encontré la que estaba buscando.

Diseño de interfaz de usuario en mi mente

No tenía una interfaz de usuario prediseñada ni los colores decididos de antemano. Decidí crear una interfaz de usuario sobre la marcha. Quería que la aplicación tuviera tres pantallas.

  • Después de que el usuario haga clic en el país, se mostrarán los detalles básicos sobre el país.
  • Botón etiquetado «Click para ver más informaciónredirige al usuario a otra página con información detallada sobre ese país.

Análisis JSON

Pensé que crear una interfaz de usuario sin un diseño previo sería difícil. Pero estaba equivocado. El análisis JSON de la API devuelta fue el más difícil. Pasé mucho tiempo creando mi propia clase de análisis. Entonces me enteré esta Sitio web. Simplemente ingrese una respuesta JSON y seleccione su idioma, automáticamente generará una clase que expone una función que puede llamar para analizar los datos. Luego hice algunos cambios según mi requerimiento e inmediatamente tuve el analizador perfecto.

Enviar una solicitud de API

los http package es una forma de enviar solicitudes a la API. Escribí mi propia clase para enviar la solicitud y getCovidData una función que devuelve un Lista del futuro respuestas. La lista devuelta ya está analizada por la clase personalizada mencionada en la sección anterior.

Enviar una solicitud de API y devolver la lista analizada

Ahora que tenía los datos y otras piezas, podía empezar a juntarlo todo y crear una aplicación que funcionara. La clase de análisis JSON analizó los datos y la lista devuelta se usa para mostrar todos los datos en esta aplicación.

Cree un archivo separado para las cosas que necesita usar con frecuencia

Página principal

solía Generador de ListView Widget disponible en Flutter para compilar una lista de países. La API también tenía un enlace a las banderas de los países. EN cabeza lado de ListView que utilicé imagen widget para mostrar banderas de países. Hay una flecha que indica que se puede hacer clic en el mosaico y los usuarios pueden ir a la página siguiente. Los casos y muertes globales se muestran debajo de la barra de búsqueda.

Página de inicio

Página de detalles

En la página de detalles, decidí ver el número total de casos, muertes, casos renovados y activos, y datos recién agregados. solía ListTile widget para mostrar datos e icono SVG personalizado en el frente. solía flutter_svg paquete para un uso sencillo de los activos SVG.

Página de detalles

Más página de información

Lo envolví en la última página Mapa widget dentro de un Vista de la lista widget. Dentro Mapa widget, usé un ListTile para mostrar los datos relevantes.

Más página de información

Y así es, al menos en papel, cómo construí esta aplicación. No mostré mucho código aquí porque quería darte una idea de cómo construir la aplicación antes de que mires el código y te rasques la cabeza. Siempre puedes visitar el repositorio para ver el código. aquí.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *