FutureBuilder — wat is het, werken met Future in Flutter

Wat is FutureBuilder in Flutter

FutureBuilder — is een ingebouwde Flutter widget uit de widgets-pakket, die Future<T> en een builder-functie accepteert. Wanneer de status van de Future verandert (bezig, voltooid met gegevens, voltooid met fout) herbouwt FutureBuilder automatisch de UI door de builder aan te roepen met een nieuwe AsyncSnapshot. Dit elimineert de noodzaak om handmatig de laadstatus te beheren via setState en vlaggen.

In tegenstelling tot StreamBuilder, die met gegevensstromen (Stream) werkt, is FutureBuilder bedoeld voor eenmalige asynchrone bewerkingen: HTTP-verzoek, lezen uit bestand, databasequery. FutureBuilder beheert zelf het abonnement op de Future: bij de eerste bouw start hij de Future en volgt de voltooiing ervan. Bij het vernietigen van de widget annuleert FutureBuilder de Future niet — dit is de verantwoordelijkheid van de ontwikkelaar.

Volgens Flutter Cookbook (2026) wordt FutureBuilder aanbevolen voor gevallen waarin de asynchrone bewerking eenmalig wordt gestart bij het initialiseren van het scherm. Voor herhaalde bewerkingen of gegevensstromen gebruikt u StreamBuilder. Beide widgets volgen hetzelfde Reactive UI-patroon, maar FutureBuilder is geoptimaliseerd voor eenmalige verzoeken.

Hoe FutureBuilder onder de motorkap werkt

De interne implementatie van FutureBuilder abonneert zich op de Future via Future.then en catchError. Bij de start stelt FutureBuilder connectionState in op ConnectionState.waiting en roept de builder aan met lege gegevens. Bij succesvolle voltooiing verandert connectionState in ConnectionState.done met gegevens. Bij een fout wordt snapshot.error gevuld met het foutobject. Elke wijziging triggert het herbouwen van de widget.

AsyncSnapshot: statussen en eigenschappen

AsyncSnapshot — is een containerobject dat FutureBuilder bij elke statuswijziging aan de builder-functie doorgeeft. Het bevat alle informatie over de huidige status van de asynchrone bewerking: of het laden bezig is, welke gegevens zijn ontvangen, of er een fout is opgetreden. Het begrijpen van AsyncSnapshot is de sleutel tot het correct bouwen van UI met FutureBuilder.

ConnectionState: vier statussen van een asynchrone bewerking

Enum ConnectionState bepaalt de fase van de asynchrone bewerking. None — beginstatus wanneer de Future nog niet is gestart (zelden gebruikt, meestal bij eerste bouw zonder initialData). Waiting — de Future wordt uitgevoerd, gegevens zijn nog niet ontvangen. Active — wordt alleen gebruikt door StreamBuilder voor streams met gedeeltelijke gegevens. Done — de Future is voltooid, gegevens zijn beschikbaar via snapshot.data of fout via snapshot.error.

Het correct afhandelen van alle AsyncSnapshot-statussen in de builder-functie is een verplichte vereiste voor productiecode. Als u de waiting-status niet afhandelt, ziet de gebruiker een leeg scherm tijdens het laden. Als u hasError niet afhandelt, krijgt de gebruiker een Exception zonder uitleg. Aanbevolen patroon: controleer hasError → controleer hasData → standaard laadindicator tonen.

Patronen voor het gebruik van FutureBuilder

FutureBuilder kan worden gebruikt in verschillende standaardpatronen, elk gericht op een specifieke taak. Laten we de belangrijkste scenario's bekijken: gegevens laden bij initialisatie, laden met caching, parallelle verzoeken en foutafhandeling met herhaling.

Gegevens laden bij initialisatie van het scherm

Het meest voorkomende patroon — FutureBuilder in de build-methode van StatefulWidget of StatelessWidget. De Future wordt doorgegeven vanuit initState of direct aangemaakt in build. Het is belangrijk om de Future niet bij elke herbouw in de build-methode aan te maken — dit leidt tot herhaalde verzoeken. Gebruik een Future die is opgeslagen in een State-veld.

Laden met caching en vernieuwen

Om herhaalde verzoeken te voorkomen, kan FutureBuilder worden gecombineerd met CachedNetworkImage of lokale cache. Na het eerste laden worden gegevens opgeslagen in het geheugen of SharedPreferences, en FutureBuilder toont de gecachete gegevens onmiddellijk, terwijl hij ze parallel uit het netwerk bijwerkt. Dit verbetert de UX door directe respons.

Volgens pub.dev (2026) is caching vooral relevant voor afbeeldingen en gegevenslijsten. FutureBuilder met CachedNetworkImageProvider toont automatisch de gecachete afbeelding, en bij afwezigheid een laadindicator met daaropvolgende weergave van het gedownloade bestand.

FutureBuilder vs setState: wat te kiezen

FutureBuilder en handmatig statusbeheer via setState — twee benaderingen van asynchrone UI in Flutter. Elk heeft zijn voor- en nadelen. De keuze hangt af van de complexiteit van het scherm en het aantal asynchrone bewerkingen.

FutureBuilder wint in eenvoud: u hoeft geen velden te declareren voor laadstatus, gegevens en fouten — alles wordt beheerd via AsyncSnapshot. Het is ideaal voor eenvoudige schermen met één asynchrone bewerking (één HTTP-verzoek, database lezen). Bij 5+ asynchrone bewerkingen op één scherm creëert FutureBuilder echter overmatige nesting — er ontstaat een „piramide" van geneste FutureBuilders.

setState met handmatige statusvlaggen biedt meer controle en leesbaarheid bij complexe logica. Voor schermen met meerdere afhankelijke verzoeken (gebruiker laden → zijn bestellingen laden → bestelgegevens laden) kunt u beter setState gebruiken met ChangeNotifier of Bloc. Volgens Flutter State Management Guide (2026) wordt voor complexe scenario's aanbevolen om Riverpod of Bloc te gebruiken in plaats van FutureBuilder, omdat ze een betere scheiding van logica en presentatie bieden.

Voorbeeld FutureBuilder met laden van gegevens uit netwerk

Laten we een praktisch voorbeeld van FutureBuilder bekijken voor het laden van een gebruikerslijst uit een REST API. De code demonstreert de correcte afhandeling van alle drie AsyncSnapshot-statussen: laden, fout en gereed.

class UserListPage extends StatefulWidget {
  const UserListPage({super.key});

  @override
  State<UserListPage> createState() => _UserListPageState();
}

class _UserListPageState extends State<UserListPage> {
  final Future<List<User>> usersFuture = UserRepository().fetchUsers();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Users')),
      body: FutureBuilder<List<User>>(
        future: usersFuture,
        builder: (context, AsyncSnapshot<List<User>> snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(Icons.error_outline, size: 48, color: Colors.red),
                  const SizedBox(height: 16),
                  Text('Error: ${snapshot.error}'),
                ],
              ),
            );
          }

          if (snapshot.hasData) {
            final users = snapshot.data!;
            return ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: CircleAvatar(backgroundImage: NetworkImage(users[index].avatarUrl)),
                  title: Text(users[index].name),
                  subtitle: Text(users[index].email),
                );
              },
            );
          }

          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

In het voorbeeld handelt FutureBuilder alle drie statussen af. Bij een fout wordt een pictogram met foutmelding weergegeven. Bij succesvol laden — ListView met avatars en namen. Tijdens het laden — CircularProgressIndicator. Future is gedeclareerd als klasseveld, wat herhaald aanroepen bij herbouw voorkomt. Dit patroon dekt 90% van de gebruiksscenario's van FutureBuilder in mobiele applicaties.