Cuando desarrollamos una aplicación móvil, en un alto porcentaje de los casos, vamos a necesitar realizar consultas en Interner a algunas APIs que nos devuelvan información que necesitamos para el uso de nuestra aplicación. En el caso de las aplicaciones hechas con Flutter no es la excepción, por eso en este artículo aprenderás a hacer llamados http en una aplicación Flutter.
¿Qué es un API?
Antes que nada vamos a recordar que es una API y como funciona. Bueno, no es tan complicado de entender, un API es un servicio propio o de terceros, que al hacer un llamado específico a una URL, nos devulve información o hacer acciones en el servidor.
Mediante una API, solo conociendo la URL, podemos traer la información que necesitamos desde internet. Claro que esto debe ser trabajado desde antes, si vas a crear una aplicación móvil y necesitas consumir datos desde internet, en un 95% de las ocasiones necesitarás construir un API personalizada para tu aplicación.
Comencemos el proceso en Flutter
Para realizar esta tarea de consumo de API desde flutter tenemos varias formas de hacerlo. En este tutorial, por cuestiones obvias de tiempo y formato, usaremos la más sencilla, que no por eso deja de ser poderosa y podemos hacer prácticamente lo que se nos ocurra con ella.
Para implementar el servicio http en Flutter, necesitamos importar el paquete que nos sirve para eso. En mi opinión Flutter ya debería traer este paquete por defecto, pero bueno, es lo que hay. Para importar el paquete a nuestro proyecto debemos ir al archivo pucspec.yaml y agregar el nombre del paquete en la sección de dependencies:
Recuerda que cuando agregar el nombre del paquete, debes guardar el archivo para que se ejecute automáticamente el flutter pub get. También es bueno recordar que sin no agregas el número de versión después de los 2 puntos : flutter entiende que tiene que buscar y usar siempre la versión más reciente.
Cuando termine de instalar el paquete ya podemos usarlo en cualquiera de nuestros widgets. Solo tendremos que importarlo al archivo y asignarlo a una variable.
Usando el paquete HTTP en Flutter
Muy bien, vamos a crear un pequeño ejemplo de como funciona el paquete http de flutter. Para comenzar debemos importarlo a nuestro archivo .dart mediante un import de toda la vida. Así:
import 'package:http/http.dart' as http;Lo único que podemos ver diferente en esta importación es el «as http». Esta sintaxis sirve para asignar el contenido del paquete (especialmente aquellos que son estaticos, es decir que tiene que invocarse sus funciones mediante una instancia) a una variable que en esta ocasión estamos llamando http. Pero podríamos llamarlo como nosotros quisieramos.
Ahora tenemos que hacer una función que es la encargada de hacer el llamado a la API, la función tiene que ser asíncrona ya que estamos intentando acceder a información que no se encuentra en nuestro dispositivo cargada, así que puede tardar en recogerse. La función quedaría así:
String url = "https://api.thecatapi.com/v1/categories";
Future<dynamic> _getListado() async {
final respuesta = await http.get(url);
if (respuesta.statusCode == 200){
return jsonDecode(respuesta.body);
} else {
print("Error con la respusta");
}
}
La primer línea del código es la dirección a la que vamos a hacer la solicitud de información. Esta es una API gratuita que te da información sobre gatos. Puedes copiar la dirección y ejecutarla en un navegador para que veas la información desde tu computadoras.
Podría interesarte: FutureBuilder: Aplicación asíncrona con Flutter en Español
La función es un Future<dynamic> esto es básicamente información cualquiera que vendrá próximamente. Si necesitas más información sobre como funcionan los Futures y las diferentes formas de usarlos, déjalo en los comentarios y haré un artículo exclusivamente sobre esto. Luego la información se deposita en la variable respuesta se analiza si la respuesta y si lo es se convierte en un JSON y se devuleve con un return.
Como mostrarlo en nuestra APP
Con lo que hicimos tenemos una función que nos devuelve información, ahora tenemos que usarla en nuestra App para poder ver esa información. Para eso usaremos un FutureBuilder en el cuerpo de nuestro Scaffold. La aplicación quedaría así:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Listado API"),
),
body: FutureBuilder<dynamic>(
future: _getListado(),
builder: (context, snapshot){
if (snapshot.hasData) {
print(snapshot);
return ListView(
children: listado(snapshot.data)
) ;
} else {
print("No hay información");
return Text("Sin data");
}
},
initialData: Center(child: CircularProgressIndicator()),
)
);
}
List<Widget> listado( List<dynamic> info ){
List<Widget> lista = [];
info.forEach((elemento) {
lista.add(Text(elemento["name"]));
});
return lista;
}
En la propiedad future del FutureBuilder hacemos el llamado a nuestra función, luego en la propiedad builder usamos el contexto y escogemos un nombre para la variable que va a contener la información. En este caso usaremos el nombre de snapshot que es un estandar, pero puedes usar el nombre que quieras.
Si te fijas, los children de el ListView son la función que está al final. Esta debe estar fuera de la clase principal del Widget. Lo que hace prácticamente es recorrer la información y agregar un Widget Text con la información que este en el campo name de la información recibida en un sentido clave valor.
Espero que te hace servido este artículo, si tienes alguna duda acerca de como funciona el http en Flutter puedes dejarme un comentario o enviarme un mensaje y con gusto te ayudaré. Hasta la próxima.