Consumo de API con http en Flutter: ejercicio resuelto
Si necesitas consumir una API en Flutter, este ejercicio te muestra un flujo base con http, parseo JSON y gestion de errores.
Enunciado
Consulta una lista de posts desde una API publica y muéstralos en pantalla.
Solución en Flutter
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(const MaterialApp(home: ApiPage()));
class ApiPage extends StatefulWidget {
const ApiPage({super.key});
@override
State<ApiPage> createState() => _ApiPageState();
}
class _ApiPageState extends State<ApiPage> {
List<dynamic> posts = [];
bool loading = true;
@override
void initState() {
super.initState();
fetchPosts();
}
Future<void> fetchPosts() async {
final uri = Uri.parse('https://jsonplaceholder.typicode.com/posts?_limit=10');
final response = await http.get(uri);
if (response.statusCode == 200) {
setState(() {
posts = jsonDecode(response.body) as List<dynamic>;
loading = false;
});
} else {
setState(() => loading = false);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('API en Flutter')),
body: loading
? const Center(child: CircularProgressIndicator())
: ListView.builder(
itemCount: posts.length,
itemBuilder: (_, i) => ListTile(title: Text(posts[i]['title'])),
),
);
}
}Resultado esperado
Se renderizan 10 registros remotos en una lista tras cargar datos.
Errores frecuentes
- No controlar
statusCode. - Parsear JSON sin validar estructura.
- Bloquear UI sin estados de carga.
Aplicación práctica
Es el bloque más común en apps que consumen backend, microservicios o CMS.
Siguiente ejercicio recomendado
- Firebase Auth login en Flutter: ejercicio resuelto con email y password
- SharedPreferences en Flutter: ejercicio resuelto para guardar ajustes
- FutureBuilder en Flutter: ejercicio resuelto para estados de carga
- Todos los ejercicios Flutter
Práctica guiada y siguiente paso
- Más ejercicios de Flutter
- Ejercicios C para reforzar fundamentos
- Programación en C en 100 ejercicios resueltos
- Ver el libro en Amazon (incluido en Kindle Unlimited)
- Suscribirte a la newsletter
FAQ
¿Qué paquete usar para llamadas HTTP en Flutter?
http es una base simple y estable para muchos casos.
¿Cuándo usar Dio en lugar de http?
Cuándo necesitas interceptores, cancelacion avanzada o configuracion más completa.
¿Es obligatorio usar modelos tipados?
No, pero mejora mantenimiento y reduce errores en apps medianas y grandes.