FutureBuilder nedir?
- Flutter kursu
- Orta seviye
- Ders 21/99
- 4 dk
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.
Başlangıç kodu
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> {
// _future field'ını ekle
@override
void initState() {
super.initState();
print('ekran açıldı');
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
// FutureBuilder ile veriyi göster
child: Text('bekle'),
),
);
}
}
void main() => runApp(MaterialApp(home: Ekrani()));Örnek çözüm
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()));Beklenen çıktı
ekran açıldı
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FutureBuilder hangi parametreyle izlenecek Future'ı alır?
- future Doğru cevap
- child
- stream
- builder
Açıklama: FutureBuilder'ın future parametresi izlenecek Future'ı alır; builder ise sonucu widget'a dönüştürür.
2 FutureBuilder'ın future'ını bağla
FutureBuilder<String>(
____: veriGetir(),
builder: (context, snapshot) {
return Text(snapshot.data ?? 'boş');
},
)FutureBuilder<String>(
future: veriGetir(),
builder: (context, snapshot) {
return Text(snapshot.data ?? 'boş');
},
)Açıklama: FutureBuilder'ın future parametresi izlenecek Future'ı alır; builder ise sonucu widget'a dönüştürür.
3 FutureBuilder parçaları
| Kavram | Anlamı |
|---|---|
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 |