Bölüm 3 — Konu 14: Navigator 1.0 — Push/Pop, Named Routes

Bölüm 3'ün son konusundayız. Şimdiye kadar tek ekranlı uygulamalar yazdık — bu derste, ekranlar arası geçişi öğreneceğiz.

#Navigator — Bir Yığın (Stack) Olarak Ekranlar

Flutter'da ekranlar arası gezinme, Dart Bölüm 9'da (aslında Bölüm 13'te FFI ile ilişkili olarak Pointer'ı, ama asıl burada ilişkili olan) öğrendiğimiz bir veri yapısına dayanır: yığın (stack). Bunu daha net Dart Bölüm 9 Konu 43'te Kutu<T extends Comparable> gibi generic örneklerde görmüştük ama "stack" kavramının kendisini işlememiştik — kısaca: stack, "son giren ilk çıkar" (LIFO — Last In First Out) mantığıyla çalışan bir veri yapısıdır.

Navigator, tam olarak bunu kullanır: her yeni ekrana geçtiğinde, o ekran yığının üstüne "itilir" (push); geri döndüğünde, en üstteki ekran yığından "çıkarılır" (pop).

Yığın (üstten alta):
  [Detay Ekranı]   <- şu an görünen (en üstte)
  [Ana Ekran]

#Navigator.push() — Yeni Bir Ekrana Geçme

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => DetayEkrani()),
    );
  },
  child: Text('Detaya Git'),
)

Parça parça inceleyelim:

• context — Bölüm 2 Konu 5'te gördüğümüz BuildContext, burada Navigator'a "bu widget'ın ağaçtaki neresinde olduğunu ve hangi Navigator'a ait olduğunu" söylüyor.
• MaterialPageRoute — yeni ekranın nasıl gösterileceğini tanımlar (Material Design'a uygun geçiş animasyonuyla).
• builder: (context) => DetayEkrani() — Bölüm 3 Konu 11'de öğrendiğimiz builder pattern'in bir başka örneği! Bir anonim fonksiyon (Dart Bölüm 5), yeni ekranın widget'ını oluşturuyor.

#Navigator.pop() — Bir Önceki Ekrana Dönme

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: Text('Geri Dön'),
)

pop(), yığından en üstteki ekranı çıkarır — kullanıcı, bir önceki ekrana geri döner. Not: AppBar, varsayılan olarak bir "geri" oku otomatik olarak gösterir (eğer Navigator yığınında birden fazla ekran varsa) — bu ok, arka planda zaten Navigator.pop(context) çağırır, sen elle eklemene gerek kalmaz.

#Ekranlar Arası Veri Gönderme

1. Giden ekrana veri gönderme (constructor parametreleri ile):

class DetayEkrani extends StatelessWidget {
  final String urunAdi;
  const DetayEkrani({super.key, required this.urunAdi});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(urunAdi)),
      body: Center(child: Text('$urunAdi detayları')),
    );
  }
}

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetayEkrani(urunAdi: 'Kalem')),
);

Bu, Dart Bölüm 6'da öğrendiğimiz constructor parametreleri kavramının doğrudan bir uygulaması — yeni ekranı oluştururken, tıpkı herhangi bir class'ı oluştururken parametre verir gibi veri geçiriyorsun.

2. Geri dönerken veri alma:

// Detay ekranında, geri dönerken bir değer gönderiyoruz
Navigator.pop(context, 'Seçilen Ürün: Kalem');

// Ana ekranda, push()'un SONUCUNU bekliyoruz
void _detayaGit() async {
  final sonuc = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => DetayEkrani(urunAdi: 'Kalem')),
  );
  print('Geri dönen değer: $sonuc');
}

Bu, Dart Bölüm 10'da öğrendiğimiz Future/async/await'in doğrudan bir uygulaması! Navigator.push(), aslında bir Future döndürür — bu future, kullanıcı geri dönene kadar tamamlanmaz (Dart Bölüm 10 Konu 45'te öğrendiğimiz "gelecekte bir değer" kavramını hatırla). Kullanıcı Navigator.pop(context, deger) çağırdığında, bu Future o değerle tamamlanır ve await satırı devam eder. Bu, Dart'ı derinlemesine öğrenmenin Flutter'da doğrudan işine yaradığı somut bir andır.

#Named Routes — Yol Tabanlı Navigasyon

Yukarıdaki yaklaşım (MaterialPageRoute ile doğrudan widget oluşturma), "anonymous routes" olarak bilinir. Alternatif olarak, her ekrana bir isim vererek, MaterialApp düzeyinde merkezi bir "yol haritası" tanımlayabilirsin:

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => AnaEkran(),
    '/detay': (context) => DetayEkrani(),
    '/ayarlar': (context) => AyarlarEkrani(),
  },
)

Bu, Dart Bölüm 4'te öğrendiğimiz Map<String, WidgetBuilder> yapısıdır — anahtar, yol adı ('/detay'); değer, o yolu oluşturan bir builder fonksiyonu.

Named route'a geçiş:

Navigator.pushNamed(context, '/detay');

Named route ile veri gönderme (arguments ile):

Navigator.pushNamed(context, '/detay', arguments: 'Kalem');

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

  @override
  Widget build(BuildContext context) {
    final urunAdi = ModalRoute.of(context)!.settings.arguments as String;
    return Scaffold(
      appBar: AppBar(title: Text(urunAdi)),
      body: Center(child: Text('$urunAdi detayları')),
    );
  }
}

Dikkat et: arguments, Object? tipinde gelir — bu yüzden as String ile cast etmen gerekiyor (Dart Bölüm 2 Konu 8'de öğrendiğimiz Object ile açık tip dönüşümü kavramını hatırla). Bu, named routes'un doğrudan constructor parametresi yaklaşımına göre daha az tip güvenli olduğu bir noktadır — bu yüzden, Bölüm 3 Konu 14'te (Flutter müfredatının ileri kısmında, Bölüm 7'de) öğreneceğimiz go_router gibi paketler, bu tip güvenliği sorununu çözen daha modern bir yaklaşım sunar.

#Anonymous vs Named Routes — Ne Zaman Hangisi?

Pratik tavsiye: Küçük/orta projelerde, anonymous routes (tip güvenliği için) genelde tercih edilir. Named routes, uygulaman büyüdükçe ve URL benzeri bir yapıya (özellikle web için) ihtiyaç duyduğunda daha değerli hale gelir. Bölüm 7'de (Flutter müfredatı), go_router ile bu iki yaklaşımın en iyi yönlerini birleştiren modern bir çözümü göreceğiz.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Navigator, ekranları bir stack (yığın) olarak yönetir — push ile üste eklenir, pop ile çıkarılır.
• Navigator.push(), bir Future döndürür — Navigator.pop(context, deger) ile bu future'ı bir değerle tamamlayabilirsin (Dart'taki Future/await bilginin doğrudan uygulaması).
• Ekranlara veri, constructor parametreleriyle (anonymous routes, tip güvenli) veya arguments ile (named routes, cast gerektirir) gönderilebilir.
• MaterialApp'in routes: haritası, Map<String, WidgetBuilder> kullanır — merkezi bir "yol haritası" tanımlamanı sağlar.

#📝 Ödevler

• [ ] İki ekranlı bir uygulama yap: ana ekrandan "Detay" ekranına Navigator.push ile geç.
• [ ] Detay ekranına, constructor parametresiyle bir veri (örn. bir isim) gönder, ekranda göster.
• [ ] Detay ekranında geri dönerken, Navigator.pop(context, deger) ile bir veri döndür, ana ekranda await ile bu veriyi al ve yazdır.
• [ ] Aynı iki ekranlı yapıyı, routes: haritası ve Navigator.pushNamed kullanarak yeniden yaz.
• [ ] Named route ile bir arguments gönder, ModalRoute.of(context)!.settings.arguments ile al ve as ile cast et.

#🏁 Bölüm 3 Tamamlandı!

Gerçek bir uygulama iskeleti kurmayı (MaterialApp/Scaffold/AppBar), listeleri (ListView.builder), kendi custom widget'larını tasarlamayı ve ekranlar arası navigasyonu öğrendin. Artık çok ekranlı, gezinebilir bir uygulama yazabiliyorsun.

Sıradaki durak Bölüm 4 — Kullanıcı Girdisi & Tema: form alanları, validasyon, tema sistemi ve responsive tasarım ile devam edeceğiz.