FutureBuilder en Flutter: ejercicio resuelto para estados de carga

  2 minutos

Si buscas FutureBuilder en Flutter, este ejercicio te enseña a gestionar estados asincronos sin complejidad innecesaria.

Carga una lista de elementos con un Future y muestra:

  • spinner mientras carga,
  • mensaje de error,
  • lista de datos cuando finaliza.
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])),
          );
        },
      ),
    );
  }
}

La pantalla refleja con claridad cada estado asincrono.

  • Crear el Future dentro de build y dispararlo varias veces.
  • No manejar hasError.
  • No contemplar lista vacía.

FutureBuilder es común para carga inicial de datos, perfiles y dashboards simples.

No. FutureBuilder resuelve carga puntual; Provider o Bloc gestionan estado más amplio.

Sí, reconstruyendo con un nuevo Future o combinandolo con pull-to-refresh.

Cuándo necesitas streams continuos o estado complejo entre pantallas.