Mostrar datos de una API en Flutter se vuelve fluido cuando combinas ListView con FutureBuilder. Aprenderás a renderizar listas largas con alto rendimiento, conectar tu app a un JSON real y manejar las diferencias de puertos entre Android, iOS y web. Es contenido pensado para quien ya configuró su API y ahora quiere desplegar la información en pantalla.

¿Qué hace ListView y por qué importa en Flutter?

El widget ListView renderiza listas extensas mostrando solo los elementos visibles en pantalla, lo que mantiene el rendimiento aun con muchos datos [1:00]. En lugar de cargar toda la lista de golpe, dibuja únicamente lo que el usuario ve, y eso marca la diferencia cuando trabajas con respuestas de API que pueden crecer.

La idea es reutilizar el widget RecipesCart, que ya extrae la información de las recetas, y conectarlo con el JSON que viene de tu API [1:20].

¿Qué es ListView en Flutter? Es un widget que muestra listas largas de forma optimizada porque solo construye los elementos visibles en pantalla, no toda la colección a la vez.

¿Cómo conecto FutureBuilder con mi llamada a la API?

Antes de pintar la lista necesitas esperar la respuesta de la API, y para eso existe FutureBuilder. Funciona como un constructor que escucha una operación asíncrona y decide qué renderizar cuando esos datos llegan [1:55].

¿Qué le pasas al FutureBuilder?

Dos piezas son obligatorias para que funcione:

• future: aquí indicas la fuente de datos, que en este caso es la llamada fetchRecipes hacia la API.
• builder: una función que recibe el context y un snapshot, donde snapshot representa el estado y la porción de datos disponibles en ese momento [2:30].

Dentro del builder se guarda la información en una variable llamada recipes, tipada como lista dinámica, lista para alimentar al ListView [2:55].

¿Cómo construyo la lista con ListView.builder?

Para armar la lista usas el constructor ListView.builder, que necesita dos parámetros esenciales:

• itemCount: cuenta cuántos elementos hay en la colección, usando recipes.length.
• itemBuilder: función que recibe context e index, y devuelve el widget que se dibuja por cada receta [3:25].

Dentro del itemBuilder se invoca el widget CartRecetas, pasándole la receta correspondiente y su índice. Así reutilizas un componente ya creado en lugar de duplicar código [3:55].

¿Para qué sirve itemBuilder en ListView? Es la función que construye cada elemento individual de la lista a partir de un índice, permitiendo que Flutter solo cree los widgets que se necesitan en pantalla.

¿Cómo evito errores cuando la lista está vacía?

Antes de llamar a .length debes validar que recipes no esté vacía. Si lo está, en lugar de devolver null, devuelves una lista vacía. Esa validación previene que la app truene cuando el snapshot todavía no tiene datos [4:30].

¿Cómo paso los datos del JSON al widget CartRecetas?

Dentro de CartRecetas se reciben los datos como dinámicos por ahora, ya que aún no están tipados [5:00]. La idea es reemplazar los datos de placeholder con los campos reales del JSON.

Los campos que mapeas desde el JSON son:

• name: el título de la receta.
• imageLink: la URL de la imagen, que sustituye al string estático que tenías antes.
• author: el nombre del autor de la receta [5:30].

Cada campo se accede abriendo corchetes y comillas sobre la variable de la receta, conectando el widget directamente con la estructura del JSON.

¿Por qué mi API no carga en el emulador?

Aquí viene un detalle que confunde a muchos: localhost no funciona igual en todas las plataformas. Cuando emulas un dispositivo móvil, la dirección cambia según el sistema operativo [6:30].

¿Cuál es la diferencia de puertos entre Android, iOS y web?

• Android: usa 10.0.2.2 para acceder al servidor local desde el emulador.
• iOS: usa 127.0.0.1.
• Web: localhost funciona normalmente cuando despliegas en Google Chrome [6:45].

Además, en Mocoon debes cambiar la configuración del servidor para que escuche en 0.0.0.0 en lugar de localhost, así el emulador puede alcanzarlo desde su red interna [7:10].

¿Por qué Android usa 10.0.2.2 en vez de localhost? Porque el emulador de Android corre en su propia red virtual, y 10.0.2.2 es el alias que apunta a la máquina anfitriona donde está corriendo tu servidor.

¿Cómo se ve la app cuando todo conecta?

Después de reiniciar Mocoon y correr la app sin el modo debug, la lista de recetas aparece con la animación que ListView trae por defecto [7:40]. Si alguna imagen no carga, es porque falta validar los enlaces, algo que se resuelve después con verificaciones sobre los datos y URLs.

Ya tienes tu app conectada a una API real, mostrando datos dinámicos y reutilizando widgets. Cuéntame en los comentarios qué API conectaste tú y cómo te fue con los puertos del emulador.