Consumir datos desde una API REST en Flutter
En este nuevo Insight aprenderemos a consumir datos desde una API Rest en Flutter. En el proceso de crear una aplicación, siempre llegaremos a un punto donde necesitaremos conectarnos a internet ya sea para obtener una imagen o cualquier tipo de información.
Para realizar un consumo de datos desde internet en Flutter estaremos haciendo uso de la librería http de Flutter que nos permitirá establecer una conexión HTTP al servidor.
Pero.. ¿qué son las APIs Rest?
API REST
API significa “interfaz de programación de aplicaciones”, en pocas palabras la API es la encargada de la comunicación de datos entre aplicaciones ya sea desde una aplicación web a móvil o viceversa.
Las APIs Rest son las más utilizadas ya que estas definen un conjunto de métodos como GET, POST, PUT Y DELETE que se refiere a la lectura, actualización y eliminación de los datos de nuestro cliente al servidor.
¡Comencemos!
Esta sería la estructura actual del proyecto.
Dado que este Insight es la continuación del anterior no modificaremos ni añadiremos diseños, he agregado una carpeta llamada data que nos ayudará a mantener todo el archivo relacionado a la API Rest.
Lo primero a realizar será descargar la librería http de Flutter que nos ayudará a consumir los datos de la API.
El enlace para descargar la librería es el siguiente:
De igual manera para este Insight estaremos utilizando una API de tercero gratuita, te dejo el siguiente enlace :
Para hacer uso de esta API tendrás que registrarte y luego suscribirte a esa API: la opción se mostrará de la siguiente manera:
Una vez suscrito te brindarán un Token con el que se podrá consumir los datos libremente desde la aplicación, ‘X-RapidAPIK-Key’ este parámetro contendrá nuestro token.
Para realizar la consulta a los endpoint hacemos uso de Postman ya que nos ayuda mucho en la visualización de los datos mostrados por la API.
Permitir conexión a internet
antes de realizar cambios en nuestra aplicación necesitamos habilitar los permisos de conexión a internet para android, para esto nos iremos al manifest y escribiremos lo siguiente:
<uses-permission android:name=”android.permission.INTERNET”/>
Ahora procederemos a construir la clase que obtendrá el objeto del json.
El siguiente enlace nos ayudara convertir nuestro json a un objeto en dart de manera rápida.
Nuestro primer objeto se mostraría de la siguiente manera:
Lo siguiente será construir la clase que consumirá los endpoint, para esta clase crearemos variables que contendrán la URL, el host y el token, esto es una buena práctica, ya que si nuestra URL base o token se llegaran a cambiar no será necesario modificar cada porción de código en la parte en que se agregó.
El método getCars en la clase carHttpService obtendrá la lista de autos, utilizaremos el endpoint ‘/cars’ que nos facilita la API.
Para obtener los datos del API en nuestra aplicación utilizará el método http.get() de la librería http. En Uri.parse definiremos el path de conexión.
la opción de headers dentro de http.get() la utilizaremos para definir el token y el host que nos brindaron rapidapi, estos nos permitirán tener el acceso a los datos de la API Rest.
Ahora es momento de unificar el backend de nuestra aplicación con el diseño, en esta ocasión solo estaremos afectando al widget ListCar, en este caso pasamos nuestro widget CarsPage de un Stateless a un Stateful.
¿Pero cuál es la diferencia entre usar StatelessWidget y un StatefulWidget?
El Statelesss es un widget sin estado, este no puede ser modificado luego de ser construido, está diseñado para widget que no cambiarán en tiempo de ejecución por ejemplo button, Text o Icon.
El Stateful es un widget con estado, este está diseñado para cambiar en tiempo de ejecución, puede cambiar varias veces en la vida del widget.
El código quedaría de la siguiente manera:
Para mostrar los datos a nuestra de UI utilizaremos Provider. Provider es una librería que nos permite manejar el estado de nuestra aplicación.
En este enlaces podrá descargar la librería:
Crearemos un Provider que compartirá información con nuestra pantalla CarPage, el código para crear nuestro provider quedaría de la siguiente manera:
ChangeNotifier es una clase incluida en flutter que proporciona notificaciones a sus oyentes cuándo queremos notificarles cambios, notifyListeners() es el encargado de informar a nuestra UI acerca de los cambios realizados.
Para que los widget escuchen las notificaciones del ChangeNotifier necesitamos encapsular nuestro widget principal en ChangeNotifierProvider, para esto nos moveremos a nuestro main.dart
De esta manera toda nuestra aplicación recibirá notificaciones de los cambios realizados en nuestro carProvider.
Para mostrar la información del provider necesitamos utilizar Provider.of<>(), este es utilizado para obtener los datos de nuestra dependencia, en nuestro ejemplo sería el método getCarsData.
El código sería el siguiente :
Y finalmente utilizaremos el widget de Consumer para reconstruir el widget List Cars cada vez que se refleje un cambio en el provider CarProvider. En el Consumer debemos definir el Provider que queremos escuchar.
El widget consumer siempre lo utilizaremos cuando se desee actualizar la UI, nuestro widget ListCars se verá de la siguiente manera:
Finalmente estaríamos mostrando la lista de autos que nos ofrece la API REST a nuestra aplicación móvil, esta fue una pequeña introducción de cómo obtener datos de una API REST utilizando la librería de http de Flutter.
Espero que hayas aprendido y disfrutado de esta introducción. Recuerda ¡Compartir!
