Bölüm 5 — Konu 18: Future/Async-Await Flutter Bağlamında, FutureBuilder

Bölüm 5'e hoş geldin — burada Dart Bölüm 10'da öğrendiğin Future/async/await bilgisi doğrudan işine yarayacak. Yeni bir kavram öğrenmiyorsun, var olan bilgini Flutter'ın UI dünyasına uyguluyorsun.

#Sorun: Asenkron Veri, Senkron UI

Dart Bölüm 10'da, bir Future'ın sonucunun gelmesini beklerken, programın donmadığını öğrenmiştik. Ama Flutter'da bir problem var: build() metodu (Bölüm 2 Konu 5'i hatırla), senkron çalışmak zorundadır — build() içinde await kullanamazsın.

@override
Widget build(BuildContext context) {
  final veri = await birApiCagrisi(); // ❌ HATA! build() async olamaz
  return Text(veri);
}

Neden olmaz? build(), Flutter'ın belirli bir anda, senkron olarak çağırdığı bir metoddur — Bölüm 1 Konu 1'de öğrendiğimiz RenderObject ağacının, her frame'de tutarlı bir şekilde güncellenmesi gerekir. Eğer build() "bekleyebilseydi", Flutter'ın ne zaman ekranı çizeceğini bilmesi imkansız hale gelirdi.

#FutureBuilder — Çözüm

FutureBuilder<String>(
  future: birApiCagrisi(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // yükleniyor
    } else if (snapshot.hasError) {
      return Text('Hata: ${snapshot.error}');
    } else {
      return Text('Veri: ${snapshot.data}');
    }
  },
)

FutureBuilder, Bölüm 3 Konu 11'de öğrendiğimiz builder pattern'in bir başka uygulamasıdır — ama bu sefer, builder fonksiyonu birden fazla kez çağrılır: bir kere Future beklerken, bir kere daha Future tamamlandığında (Flutter, arka planda bunu senin için setState() benzeri bir mekanizmayla yönetir).

#AsyncSnapshot — Future'ın "O Anki Durumunun" Fotoğrafı

Dart Bölüm 10'da bir Future'ın üç olası durumu olduğunu öğrenmiştik (henüz tamamlanmadı / başarıyla tamamlandı / hata ile tamamlandı). AsyncSnapshot<T>, Dart Bölüm 9'da öğrendiğimiz generic bir sınıf olarak, bu üç durumu tek bir nesnede kapsüller:

snapshot.connectionState  // ConnectionState.none / waiting / active / done
snapshot.hasData          // veri geldi mi? (bool)
snapshot.data             // gelen veri (T?, nullable!)
snapshot.hasError         // hata oluştu mu? (bool)
snapshot.error            // oluşan hata (Object?, nullable!)

Dikkat et: snapshot.data, nullable'dır (Dart Bölüm 2'yi hatırla) — çünkü Future henüz tamamlanmamışsa, henüz bir veri yok. Bu yüzden snapshot.data kullanmadan önce, connectionState veya hasData ile kontrol etmen gerekir — tıpkı Bölüm 2'de öğrendiğimiz null safety pratiklerinde olduğu gibi.

#ConnectionState — Bir Enum, Dart Bölüm 7'yi Hatırla

enum ConnectionState { none, waiting, active, done }

Bu, Dart Bölüm 7'de öğrendiğimiz enum'un, Flutter'ın kendi kütüphanesinde tanımlanmış bir örneğidir:

• none: henüz bir future verilmedi.
• waiting: future çalışıyor, henüz tamamlanmadı.
• done: future tamamlandı (başarılı veya hatalı).

FutureBuilder ile en sık waiting ve done durumlarını kontrol edersin.

#Gerçek Bir Örnek — Simüle Edilmiş API Çağrısı

class VeriEkrani extends StatelessWidget {
  const VeriEkrani({super.key});

  Future<String> _veriGetir() async {
    await Future.delayed(Duration(seconds: 2)); // Dart Bölüm 10'u hatırla
    return 'Sunucudan gelen veri';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Veri Ekranı')),
      body: Center(
        child: FutureBuilder<String>(
          future: _veriGetir(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            }
            if (snapshot.hasError) {
              return Text('Bir hata oluştu: ${snapshot.error}');
            }
            return Text(snapshot.data!); // done durumunda, data artık null değil
          },
        ),
      ),
    );
  }
}

Bu kod çalıştığında: 2 saniye boyunca bir yükleme göstergesi (CircularProgressIndicator) görünür, sonra otomatik olarak "Sunucudan gelen veri" metnine geçer — kullanıcı hiçbir şey yapmadan.

#Kritik Bir Tuzak — future: Parametresini build() İçinde Doğrudan Çağırmak

// ❌ TEHLİKELİ pratik
class VeriEkraniYanlis extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: _veriGetir(), // HER rebuild'de YENİDEN çağrılır!
      builder: (context, snapshot) { ... },
    );
  }
}

Bölüm 2 Konu 6'da öğrendiğimiz build()'in her rebuild'de tekrar çalıştığını hatırlarsan — bu, ciddi bir soruna yol açıyor: eğer bu widget'ı içeren bir üst widget herhangi bir sebeple setState() çağırırsa (Bölüm 2'yi hatırla), build() tekrar çalışır, ve _veriGetir() her seferinde yeniden çağrılır — yani API isteği gereksiz yere tekrar tekrar atılır!

Doğru pratik — Future'ı StatefulWidget'ın state'inde saklamak:

class VeriEkraniDogru extends StatefulWidget {
  const VeriEkraniDogru({super.key});

  @override
  State<VeriEkraniDogru> createState() => _VeriEkraniDogruState();
}

class _VeriEkraniDogruState extends State<VeriEkraniDogru> {
  late final Future<String> _veriFuture; // late final — Dart Bölüm 8'i hatırla!

  @override
  void initState() {
    super.initState();
    _veriFuture = _veriGetir(); // SADECE BİR KERE çağrılır
  }

  Future<String> _veriGetir() async {
    await Future.delayed(Duration(seconds: 2));
    return 'Sunucudan gelen veri';
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<String>(
      future: _veriFuture, // her rebuild'de AYNI future kullanılıyor
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }
        return Text(snapshot.data ?? 'Veri yok');
      },
    );
  }
}

late final Future<String> _veriFuture — Dart Bölüm 8 Konu 40'ta öğrendiğimiz late'in lazy initialization dışındaki asıl kullanım senaryosunu görüyorsun: alan, constructor'da değil, initState() içinde (Bölüm 2 Konu 6'da kısaca gördüğümüz, bir kere çalışan metod) atanıyor, ama non-nullable kalıyor. initState(), sadece bir kere çağrıldığı için, _veriGetir() de sadece bir kere çalışıyor — build() ne kadar tekrar çalışırsa çalışsın, aynı Future nesnesi kullanılıyor.

#?? ile Güvenli Varsayılan Değer

Text(snapshot.data ?? 'Veri yok')

Dart Bölüm 2/3'te öğrendiğimiz ?? operatörü, burada çok yaygın bir kalıptır — snapshot.data nullable olduğu için, ! ile zorlamak yerine (riskli, Bölüm 2'yi hatırla), ?? ile güvenli bir varsayılan sağlamak daha iyi bir pratiktir.

#🎯 Bu Dersten Çıkarılması Gerekenler

• build() senkron çalışmak zorundadır, await kullanamaz — FutureBuilder, bir Future'ın durumuna göre farklı UI göstermeyi sağlar.
• AsyncSnapshot, bir Future'ın o anki durumunu (waiting/done, data, error) kapsülleyen generic bir sınıftır.
• snapshot.data/snapshot.error nullable'dır — kullanmadan önce connectionState veya hasData/hasError ile kontrol edilmelidir.
• Kritik tuzak: future: parametresine build() içinde doğrudan bir fonksiyon çağrısı vermek, her rebuild'de gereksiz yeniden çağrılara yol açar — Future'ı initState() içinde, late final bir alanda saklamak doğru çözümdür.

#📝 Ödevler

• [ ] Future.delayed ile sahte bir veri çeken, FutureBuilder ile loading/error/success durumlarını yöneten bir ekran yaz.
• [ ] Bilerek future: parametresine doğrudan bir fonksiyon çağrısı ver, üst widget'ta bir setState() tetikleyerek API çağrısının tekrar tekrar yapıldığını (bir print ile sayarak) kanıtla.
• [ ] Aynı sorunu, initState() + late final kalıbıyla düzelt, artık sadece bir kere çağrıldığını doğrula.
• [ ] FutureBuilder'da bilerek bir hata fırlatan bir future kullan (throw Exception(...)), snapshot.hasError ile bunu yakalayıp kullanıcıya göster.
• [ ] ConnectionState'in farklı durumlarını (waiting, done) print ile takip ederek, FutureBuilder'ın builder fonksiyonunun kaç kez çağrıldığını gözlemle.

Sıradaki konu: Bölüm 5 — Konu 19: Stream, StreamBuilder