FutureBuilder in Flutter: solved exercise for loading states

  2 minutes

If you are looking for FutureBuilder in Flutter, this solved exercise gives you a practical implementation pattern you can reuse in real projects.

Build a screen with:

  • show loading spinner
  • show error message on failure
  • render list when data is ready
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])),
          );
        },
      ),
    );
  }
}

The UI transitions correctly between waiting, error, and success states.

  • Creating a new Future on every build.
  • Skipping hasError handling.
  • Not handling empty data states.

Great for initial data fetches in profile, dashboard, and setup screens.

No. It solves one async rendering case, not full app state management.

Yes, trigger a new Future and rebuild the widget.

When data is continuous or state is shared across many screens.