Flutter
FutureBuilder nedir?
FutureBuilder ile async sonucu arayüze bağlamayı öğrenirsin.
FutureBuilder nedir?
FutureBuilder, bir Future'ın sonucunu arayüze bağlayan widget'tır. future parametresi izlenecek Future'ı, builder ise sonucu widget'a dönüştüren fonksiyonu alır.
FutureBuilder<String>(
future: veriGetir(),
builder: (context, snapshot) {
return Text(snapshot.data ?? 'boş');
},
)
Future tamamlandığında builder yeniden çağrılır.
snapshot ile veriye erişim
builder fonksiyonu bir AsyncSnapshot alır. snapshot.data Future'ın sonucunu verir. Sonuç henüz yoksa null döner; bu yüzden genellikle ?? ile varsayılan değer verilir.
builder: (context, snapshot) {
return Text(snapshot.data ?? 'yükleniyor');
}
snapshot, Future'ın o anki durumunu taşır.
Uygulama FutureBuilder ile veri göster
veriGetir async metodu 100 ms bekleyip 'Merhaba FutureBuilder' döndürsün. Ekrani stateful widget'ında _future field'ı tut ve initState'te print('ekran açıldı') çağır. build'de FutureBuilder<String> ile snapshot.data ?? 'bekle' değerini göster.
Örnek çözümü göster
import 'package:flutter/material.dart';
Future<String> veriGetir() async {
await Future.delayed(Duration(milliseconds: 100));
return 'Merhaba FutureBuilder';
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
late Future<String> _future;
@override
void initState() {
super.initState();
print('ekran açıldı');
_future = veriGetir();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<String>(
future: _future,
builder: (context, snapshot) {
return Text(snapshot.data ?? 'bekle');
},
),
),
);
}
}
void main() => runApp(MaterialApp(home: Ekrani()));
Kendini test et
-
FutureBuilder hangi parametreyle izlenecek Future'ı alır?
Cevabı göster
future — FutureBuilder'ın future parametresi izlenecek Future'ı alır; builder ise sonucu widget'a dönüştürür.
-
FutureBuilder'ın future'ını bağla
FutureBuilder<String>(
____: veriGetir(),
builder: (context, snapshot) {
return Text(snapshot.data ?? 'boş');
},
)
Cevabı göster
FutureBuilder<String>(
future: veriGetir(),
builder: (context, snapshot) {
return Text(snapshot.data ?? 'boş');
},
)
-
FutureBuilder parçaları
- FutureBuilder
- Future'ı arayüze bağlayan widget
- future
- İzlenecek Future'ı alan parametre
- builder
- Sonucu widget'a dönüştüren fonksiyon
- snapshot
- Future'ın o anki durumunu taşıyan nesne
Sıradaki ders: AsyncSnapshot
