FutureBuilder en Flutter: ejercicio resuelto
Si buscas FutureBuilder en Flutter, este ejercicio te enseña a gestionar estados asincronos sin complejidad innecesaria.
Enunciado
Carga una lista de elementos con un Future y muestra:
- spinner mientras carga,
- mensaje de error,
- lista de datos cuando finaliza.
Solución en Flutter
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: FutureBuilderPage()));
class FutureBuilderPage extends StatelessWidget {
const FutureBuilderPage({super.key});
Future<List<String>> loadItems() async {
await Future.delayed(const Duration(seconds: 2));
return ['Flutter', 'Dart', 'Widgets', 'State'];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('FutureBuilder')),
body: FutureBuilder<List<String>>(
future: loadItems(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(child: CircularProgressIndicator());
}
if (snapshot.hasError) {
return const Center(child: Text('Error cargando datos'));
}
final items = snapshot.data ?? [];
return ListView.builder(
itemCount: items.length,
itemBuilder: (_, i) => ListTile(title: Text(items[i])),
);
},
),
);
}
}Resultado esperado
La pantalla refleja con claridad cada estado asincrono.
Errores frecuentes
- Crear el
Futuredentro debuildy dispararlo varias veces. - No manejar
hasError. - No contemplar lista vacía.
Aplicación práctica
FutureBuilder es común para carga inicial de datos, perfiles y dashboards simples.
Siguiente ejercicio recomendado
- Provider en Flutter para estado global: ejercicio resuelto
- Contador en Flutter con setState: ejercicio resuelto paso a paso
- Consumo de API con http en Flutter: ejercicio resuelto
- 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
¿FutureBuilder reemplaza Provider o Bloc?
No. FutureBuilder resuelve carga puntual; Provider o Bloc gestionan estado más amplio.
¿Sirve para refresh manual?
Sí, reconstruyendo con un nuevo Future o combinandolo con pull-to-refresh.
¿Cuándo no usar FutureBuilder?
Cuándo necesitas streams continuos o estado complejo entre pantallas.