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ányFuture, amit figyelni kell.initialData: Az adatok, amelyek megjelennek, mielőtt afuturebefejeződik.builder: (AsyncWidgetBuilder) függvény, amely mindenfutureállapotváltozásakor meghívódik, ésBuildContext-et valamintAsyncSnapshot-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
Futureabuildmetódusban jön létre. Ajánlott egyszer létrehozni (pl. azinitState-ben).