Obtener datos de un API Rest con Flutter

Kike Sanchez

Nov 25, 2020·2 min read

Una acción necesaria en toda app es la comunicación con servicios REST, en este post voy a tratar de resumir lo más posible esta tarea.

1. Dependencia

Lo primero que necesitamos es agregar el paquete http como dependencia en nuestro archivo de configuración pubspec.yaml

dependencies:   
  http: ^0.12.2

2. Conectar servicio

Para este ejemplo vamos a usar la ya conocida web JSONPlaceholder para obtener los datos de un álbum con el método get()

Ahora importamos el paquete http:

import 'package:http/http.dart' as http;

y enlazamos la app con nuestro servicio de jsonplaceholder

El método http.get() devuelve un Future que contiene un Response.

• Future es una clase de Dart para trabajar con operaciones asíncronas. Es usado para representar un valor o un error.
• La clase http.Response contiene los datos recibidos.

Podríamos continuar usando la respuesta del Future, pero en mi experiencia nos ayudará mucho si convertimos el Response en nuestro propio objeto Dart para tener un mayor control de él.

¿Pero cómo lo haremos?

Creamos una clase Album que contiene los datos de respuesta del servicio y un constructor factory que creará un álbum desde un json.

Ahora actualizamos nuestra función obtenerAlbum() para devolver un Future<Album>

👏🏻 Con esto ya tenemos una función a la que podemos invocar para obtener un álbum desde el servicio.

3. Obtener y mostrar los datos

Para obtener los datos y mostrarlos en la pantalla, vamos a usar el widget FutureBuilder que viene con Flutter y hace que sea fácil trabajar con datos asíncronos.

El FutureBuilder recibe 2 parámetros:

future: con el que quieres trabajar. En nuestro caso, llamaremos a nuestra función obtenerAlbum()

builder: que le dice a Flutter qué ejecutar, dependiendo del estado del future.

Como recomendación, no ejecutar la función de llamada al servicio dentro del método build, sino extraerlo en el método initState() del StatefulWidget, de esta manera la llamada solo se realizará una sola vez en el widget padre y no cada vez q se redibuje el widget.

4. Código completo

Parece difícil pero al trabajar en ello te darás cuenta que no lo es, espero que esta guía te sirva de ayuda así como me ayudó a mí en su momento. Lo más importante es no dejar de aprender, como siempre digo.

👨🏻‍💻 Enjoy code!

Enlaces: