Yükleme durumu
- Flutter kursu
- Orta seviye
- Ders 64/99
- 4 dk
FutureBuilder ile yükleme ve hata durumlarını gösterirsin.
FutureBuilder ile durum
FutureBuilder, bir Future'ı izleyip gelen snapshot'a göre arayüzü çizer. future parametresine Future'ı, builder parametresine ise AsyncSnapshot alan bir fonksiyon verirsin. Bekleme sırasında yükleme göstergesi, hata durumunda hata mesajı gösterirsin.
FutureBuilder<Weather>(
future: weatherFuture,
builder: (context, snapshot) {
if (snapshot.hasError) {
return Text('Hata: ${snapshot.error}');
}
return const CircularProgressIndicator();
},
)AsyncSnapshot ve bağlantı durumu
AsyncSnapshot Future'ın durumunu taşır. snapshot.connectionState ile ConnectionState.waiting kontrolü yaparak yükleme durumunu yakalayabilir, snapshot.hasData ile verinin gelip gelmediğini öğrenebilirsin.
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Hata: ${snapshot.error}');
}
return Text(snapshot.data!.sehir);
}Uygulama FutureBuilder ile durum yönetimi
Bir FutureBuilder<Weather> döndüren build metodu yaz. Yükleme durumunda CircularProgressIndicator, hata durumunda Text('Hata'), veri geldiğinde Text(snapshot.data!.sehir) göster.
Başlangıç kodu
import 'package:flutter/material.dart';
class Weather {
final String sehir;
final double sicaklik;
Weather(this.sehir, this.sicaklik);
}
// WeatherScreen sınıfını yaz
// build metodu FutureBuilder döndürsün
// yükleme durumunda yükleme göstergesi
// hata durumunda Text('Hata')
// veri geldiğinde sehir alanını göster
void main() {
print('hazir');
}Örnek çözüm
import 'package:flutter/material.dart';
class Weather {
final String sehir;
final double sicaklik;
Weather(this.sehir, this.sicaklik);
}
class WeatherScreen extends StatelessWidget {
final Future<Weather> future;
const WeatherScreen({super.key, required this.future});
@override
Widget build(BuildContext context) {
return FutureBuilder<Weather>(
future: future,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
} else if (snapshot.hasError) {
return const Text('Hata');
}
return Text(snapshot.data!.sehir);
},
);
}
}
void main() {
print('hazir');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FutureBuilder beklenirken (loading) ne gösterilir?
- Otomatik olarak veri
- Boş ekran
- Hata mesajı
- Yükleme göstergesi (örn. CircularProgressIndicator) Doğru cevap
Açıklama: Bekleme durumunda connectionState waiting olur; bu sırada yükleme göstergesi gösterirsin. Veri henüz gelmez, boş ekran kötü deneyimdir, hata mesajı yalnızca hasError durumunda gösterilir.
2 Yükleme durumunu yakala
builder: (context, snapshot) {
if (snapshot.connectionState == ____) {
return const CircularProgressIndicator();
}
return Text(snapshot.data!.sehir);
}builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
return Text(snapshot.data!.sehir);
}Açıklama: Bekleme durumunu yakalamak için ConnectionState.waiting kontrol edilir. active, none ve done yükleme anını belirtmez; done tamamlandığını gösterir.
3 FutureBuilder parçaları
| Kavram | Anlamı |
|---|---|
future |
izlenen Future |
builder |
arayüz çizen fonksiyon |
snapshot.connectionState |
bağlantı durumu |
snapshot.hasError |
hata var mı |