Conectar tu app de Flutter a una API es uno de esos pasos que separan un prototipo de un producto real. Aquí aprendes cómo consumir una API en Flutter usando la librería HTTP, hacer una petición GET y transformar la respuesta JSON en datos listos para mostrar en pantalla, ideal si estás construyendo tu primera app con datos dinámicos.

¿Qué es una API y por qué la necesitas en Flutter?

Una API es una interfaz que permite que dos aplicaciones se comuniquen entre sí. En el caso de Flutter, te sirve para traer datos desde un servidor (real o simulado) y mostrarlos dentro de tu app, sin tener que escribir esa información a mano.

¿Qué hace la librería HTTP en Flutter? Te permite hacer peticiones como GET, POST, PUT o DELETE a una API y recibir su respuesta. Es el puente entre tu app y los datos.

En este flujo vas a usar un simulador llamado Mocoon que expone un endpoint local con un listado de recetas. La idea es pedirle esos datos y convertirlos en una lista que Flutter pueda leer.

¿Cómo instalar la librería HTTP en tu proyecto Flutter?

La instalación es directa y se hace desde el archivo de dependencias del proyecto [0:18].

• Abre tu archivo pubspec.yaml.
• Dentro de dependencies, agrega http con la versión que quieras instalar (la última en este caso).
• Corre el comando flutter pub get para instalar y actualizar todas las dependencias.

Ese comando asegura que el paquete quede listo para importarse. Y aquí viene el detalle clave: cuando importes la librería en tu archivo, vas a usar un alias para no chocar con otras funciones del proyecto.

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

Ese as http es el apodo de la importación. Así, cada vez que llames a http.get, Flutter sabe exactamente de dónde viene esa función.

¿Cómo hacer una petición GET y convertir la respuesta a JSON?

El objetivo es traer un listado de recetas desde tu simulador local. Para eso necesitas una función asíncrona que espere la respuesta del servidor antes de continuar [1:05].

Construir la función fetchRecipes paso a paso

La función devuelve un Future<List> porque la respuesta no llega de inmediato y porque esperas una lista de elementos.

dart Future<List> fetchRecipes() async { final url = Uri.parse('http://localhost:PUERTO/recipes'); final response = await http.get(url); final data = json.decode(response.body); return data['recetas']; }

Fíjate en lo que pasa línea por línea:

• Uri.parse toma el string de tu URL y lo convierte en un objeto Uri válido para la petición.
• await http.get(url) pausa la función hasta que el servidor responda.
• json.decode(response.body) convierte el body de la respuesta (que llega como texto) en una estructura de Dart que puedes recorrer.
• data['recetas'] accede al objeto principal del JSON, porque dentro de él viven los objetos individuales de cada receta.

¿Por qué usar await en una función asíncrona? Porque las peticiones HTTP tardan. await le dice a Dart que espere la respuesta antes de seguir ejecutando el resto del código.

Acceder al body y navegar el JSON

Un punto que suele confundir: la respuesta de una API trae varias partes (status, headers, body), pero los datos que te interesan están en response.body. Ese body llega como string, y por eso necesitas json.decode para transformarlo en algo manipulable.

En este caso, el JSON tiene un objeto gigante llamado recetas que contiene los objetos pequeños de cada receta. Por eso el return apunta a data['recetas'] y no a data completo.

¿Cómo verificar que tu API está respondiendo correctamente?

Antes de pintar nada en pantalla, conviene confirmar que los datos llegan bien. Hay dos pasos prácticos para hacerlo.

• Enciende tu servidor desde la aplicación de Mocoon en la parte superior.
• Llama a fetchRecipes cada vez que se construya la pantalla, para forzar la petición.
• Despliega la app en Google Chrome y abre la pestaña Inspect > Network.

Dentro de Network puedes filtrar las llamadas por fetch y vas a ver una entrada llamada recetas. Si haces clic en ella y entras a la pestaña de respuesta, ahí están todos los datos que tu app está recibiendo [4:30].

Ese es el momento de la verdad: si ves el JSON completo, tu integración está funcionando y solo te queda decidir cómo mostrar esa información al usuario.

Tipado de respuestas y siguientes pasos

Por ahora la función devuelve una List dinámica, lo que significa que Dart no sabe qué tipo de objetos viven dentro. Funciona, pero pierdes autocompletado y validaciones.

El siguiente paso natural es tipar esa respuesta creando una clase modelo (por ejemplo, Recipe) que represente cada objeto del JSON. Eso te va a dar seguridad de tipos, mejor mantenimiento y código mucho más legible cuando crezca el proyecto.

Ahora te toca a ti: crea tu propio JSON, levántalo en Mocoon o en el simulador que prefieras, y cuéntame en los comentarios cómo se ve tu respuesta en consola.