Wat is FutureBuilder in Flutter?

Widget voor het bouwen van een interface op basis van asynchrone gegevens verkregen uit Future.

Belangrijkste parameters:

• future: Een instantie van Future die moet worden gevolgd.
• initialData: Gegevens die worden weergegeven voordat de future is voltooid.
• builder: Functie (AsyncWidgetBuilder) die wordt aangeroepen bij elke wijziging in de toestand van de future en ontvangt BuildContext en AsyncSnapshot.

Toestanden van AsyncSnapshot:

• ConnectionState.none: De Future is nog niet begonnen.
• ConnectionState.waiting: De Future is bezig.
• ConnectionState.active: (Zelden voor Future) De Future heeft tussentijdse gegevens geretourneerd.
• ConnectionState.done: De Future is voltooid (met succes of met fout).

Voorbeeld van gebruik:

// Stel dat we een functie hebben die een Future<String> retourneert
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // Simulatie van een netwerkverzoek
  return "Gegevens geladen!";
}

// ... in de build-methode van de widget:
@override
Widget build(BuildContext context) {
  return FutureBuilder<String>(
    future: fetchData(), // Onze Future
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // Weergeven van een laadindicator terwijl de Future wordt uitgevoerd
        return CircularProgressIndicator();
      } else if (snapshot.hasError) {
        // Weergeven van een foutmelding als de Future met fout eindigt
        return Text('Fout: ${snapshot.error}');
      } else {
        // Weergeven van de gegevens als de Future succesvol is voltooid
        return Text('Resultaat: ${snapshot.data}');
      }
    },
  );
}

Voordelen:

• Maakt het werken met asynchrone operaties in de UI eenvoudiger.
• Bouwt de UI automatisch opnieuw op bij verandering van de Future-status.
• Scheidt duidelijk de gegevenslaadlogica van de UI-bouwlogica.

Nadelen:

• Kan leiden tot onnodige herbouw als de Future binnen de build-methode wordt gemaakt. Het wordt aanbevolen om de Future eenmaal te maken (bijvoorbeeld in initState).