Flutter
Yükleme durumu
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.
Örnek çözümü göster
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');
}
Kendini test et
-
FutureBuilder beklenirken (loading) ne gösterilir?
- Otomatik olarak veri
- Boş ekran
- Hata mesajı
- Yükleme göstergesi (örn. CircularProgressIndicator)
Cevabı göster
Yükleme göstergesi (örn. CircularProgressIndicator) — 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.
-
Yükleme durumunu yakala
builder: (context, snapshot) {
if (snapshot.connectionState == ____) {
return const CircularProgressIndicator();
}
return Text(snapshot.data!.sehir);
}
Cevabı göster
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
return Text(snapshot.data!.sehir);
}
-
FutureBuilder parçaları
- future
- izlenen Future
- builder
- arayüz çizen fonksiyon
- snapshot.connectionState
- bağlantı durumu
- snapshot.hasError
- hata var mı
Sıradaki ders: Özet - Hava durumu uygulaması
