Sobes.tech
Junior

Mi az a FutureBuilder a Flutterben?

sobes.tech MI

Válasz az MI-től

Widget az aszinkron adatokon alapuló felület építéséhez, amely a Future segítségével szerezhető be.

Fő paraméterek:

  • future: Egy példány Future, amit figyelni kell.
  • initialData: Az adatok, amelyek megjelennek, mielőtt a future befejeződik.
  • builder: (AsyncWidgetBuilder) függvény, amely minden future állapotváltozásakor meghívódik, és BuildContext-et valamint AsyncSnapshot-et kap.

Az AsyncSnapshot állapotai:

  • ConnectionState.none: A Future még nem indult el.
  • ConnectionState.waiting: A Future fut.
  • ConnectionState.active: (Ritkán Future esetén) A Future közbenső adatokat adott vissza.
  • ConnectionState.done: A Future befejeződött (sikeresen vagy hibával).

Használati példa:

// Tegyük fel, van egy függvényünk, ami egy Future<String>-et ad vissza
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // Hálózati kérés szimulációja
  return "Adatok betöltve!";
}

// ... a widget build metódusában:
@override
Widget build(BuildContext context) {
  return FutureBuilder<String>(
    future: fetchData(), // A mi Future-ünk
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // Betöltő jelző mutatása, amíg a Future fut
        return CircularProgressIndicator();
      } else if (snapshot.hasError) {
        // Hiba esetén hibaüzenet mutatása
        return Text('Hiba: ${snapshot.error}');
      } else {
        // Sikeres befejezés esetén az adatok mutatása
        return Text('Eredmény: ${snapshot.data}');
      }
    },
  );
}

Előnyök:

  • Egyszerűsíti az aszinkron műveletek kezelését a UI-ban.
  • Automatikusan újraépíti a UI-t a Future állapotának változásakor.
  • Világosan elkülöníti az adatok betöltésének logikáját a UI építésétől.

Hátrányok:

  • Felesleges újrarenderelést okozhat, ha a Future a build metódusban jön létre. Ajánlott egyszer létrehozni (pl. az initState-ben).