Özet - FutureBuilder
- Flutter kursu
- Orta seviye
- Ders 25/99
- 4 dk
FutureBuilder ve snapshot'ı birleştirerek veri ekranı yaparsın.
Özet - FutureBuilder
Bu bölümde üç şey öğrendin: FutureBuilder ile bir Future'ı arayüze bağlarsın; AsyncSnapshot ile connectionState ve data'ya erişirsin; waiting ve hasError ile yükleniyor ve hata durumlarını yönetirsin.
FutureBuilder<String>(
future: _future,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
}
return Text(snapshot.data ?? 'boş');
},
)Bunları birleştirerek veri ekranı yaparsın.
Uygulama Veri ekranı yap
veriGetir async metodu 100 ms bekleyip 'Veri hazır' döndürsün. Ekrani stateful widget'ında _future field'ı tut, initState'te print('ekran açıldı') çağır ve _future = veriGetir() ata. FutureBuilder<String> içinde: waiting iken CircularProgressIndicator, hasError iken Text('hata'), değilse Text(snapshot.data!) göster. main'de uygulamayı başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
Future<String> veriGetir() async {
await Future.delayed(Duration(milliseconds: 100));
return 'Veri hazır';
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
// _future field ekle
// initState: print ve future'ı başlat
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(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 'Veri hazır';
}
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) {
if (snapshot.connectionState == ConnectionState.waiting) {
return CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('hata');
}
return Text(snapshot.data!);
},
),
),
);
}
}
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'da yükleniyor durumunu nasıl anlarız?
- snapshot.hasError
- snapshot.data == null
- snapshot.connectionState == ConnectionState.none
- snapshot.connectionState == ConnectionState.waiting Doğru cevap
Açıklama: ConnectionState.waiting, Future'ın henüz tamamlanmadığını ve yükleniyor aşamasında olduğunu belirtir.
2 FutureBuilder'ın future parametresini bağla
FutureBuilder<String>(
future: ____,
builder: (context, snapshot) => Text('?'),
)FutureBuilder<String>(
future: _future,
builder: (context, snapshot) => Text('?'),
)Açıklama: FutureBuilder'ın future parametresi izlenecek Future'ı alır; genellikle state içindeki _future değişkenidir.
3 FutureBuilder bölümünün parçaları
| Kavram | Anlamı |
|---|---|
FutureBuilder |
Future'ı arayüze bağlayan widget |
AsyncSnapshot |
Future'ın o anki durumunu taşır |
ConnectionState.waiting |
Yükleniyor aşaması |
hasError |
Hata durumunu belirten özellik |