Conexión a APIs en Flutter

Trabajar con APIs en Flutter es fundamental para integrar aplicaciones con datos externos. Aquí exploraremos cómo configurar la biblioteca HTTP, construir una llamada GET para obtener datos de un simulador, y procesar las respuestas en formato JSON de manera eficiente.

¿Cómo configurar la biblioteca HTTP en tu proyecto?

1. Instalación de dependencias:

   • Agrega la dependencia http a tu archivo pubspec.yaml con la versión deseada (por defecto, se recomienda la más reciente):

     dependencies:
       http: ^latest_version
     

   • Ejecuta el comando flutter pub get para instalar y actualizar las dependencias.

2. Importación de la biblioteca:

   • Incluye el paquete HTTP en tu archivo Dart:

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

¿Cómo crear una función para hacer solicitudes GET?

1. Definición de la función:

   • Crea una función asíncrona que retorne un Future de tipo lista:

     Future<List<dynamic>> fetchRecipes() async {
       // Implementación aquí
     }
     

2. Construcción de la URL:

   • Define la dirección del simulador local configurada en Mocoon:

     final Uri url = Uri.parse('http://localhost:3000/recetas');
     

3. Realización de la solicitud:

   • Realiza una llamada GET y captura la respuesta:

     final response = await http.get(url);
     

¿Cómo procesar la respuesta JSON?

1. Conversión a JSON:

   • Usa la biblioteca dart:convert para decodificar el cuerpo de la respuesta:

     import 'dart:convert';
     
     final jsonData = json.decode(response.body);
     

2. Extracción de datos específicos:

   • Navega por los objetos JSON para extraer los datos relevantes:

     final recipes = jsonData['recetas'] as List;
     return recipes;
     

¿Cómo integrar los datos en la interfaz?

1. Cargar datos al inicializar la pantalla:

   • Invoca la función fetchRecipes en el método initState o equivalente para cargar los datos al inicio.

2. Desplegar la información:

   • Usa herramientas de depuración como Chrome DevTools para verificar las solicitudes y respuestas:
     • Abre la consola en Google Chrome.
     • Inspecciona las llamadas de red bajo la sección “Network”.
     • Filtra por el nombre de la función (e.g., fetch).

3. Estructuración del diseño:

   • Renderiza los datos JSON obtenidos directamente en tu aplicación Flutter para construir una lista dinámica o cualquier otra representación gráfica.