Route — nedir, Flutter'da rota türleri ve oluşturma

Flutter'da Route Nedir

Route, Flutter gezinme sisteminin temelidir. Kullanıcının bir uygulamada gördüğü her ekran, Navigator yığınında bulunan bir Route nesnesi ile temsil edilir. Route, ekranı kontrol kodundan soyutlar: Navigator Route'u ekler ve kaldırırken, Route'un içinde kullanıcının gördüğü arayüz bulunur. Bu mimari, gezinme ve görüntüleme arasındaki sorumluluğu ayırır.

Basit widget değiştirmenin aksine, Route sıradan widget'lar için kullanılamayan hizmetler sağlar: ModalBarrier (bir iletişim kutusu açıkken arka planı karartma), giriş ve çıkış animasyonu kontrolü, Android'de donanımsal geri düğmesi işleme ve ekranlar arasında yumuşak geçişler için Hero animasyonu ile entegrasyon.

Flutter Cookbook (2026)'ya göre Route, Hero animasyonu için anahtar bir öğedir: Bir Route'daki Hero widget'ı, sonraki Route'daki Hero widget'ına geçişi otomatik olarak canlandırarak “uçan” bir öğe efekti oluşturur. Bu, Route'un animasyon sırasında her iki ekranı da Overlay'de tutması sayesinde mümkündür.

Gezinmenin Yapı Taşı Olarak Route

Route, hem basit mobil uygulamalar (Navigator 1.0 aracılığıyla) hem de derin bağlantılı karmaşık senaryolar (Navigator 2.0) için temeldir. Navigator 2.0'da Route, RouterDelegate'ın rota yapılandırmasından dönüştürdüğü bir Page'i temsil eder. Bu nedenle, seçilen yaklaşım veya paketten bağımsız olarak herhangi bir Flutter gezinme sistemiyle çalışmak için Route'u anlamak esastır.

Route Türleri: MaterialPageRoute ve CupertinoPageRoute

Flutter, her biri davranışı belirli bir platforma uyarlayan birkaç yerleşik Route uygulaması sağlar. Doğru Route türünü seçmek kullanıcı deneyimini etkiler: Android'de Material animasyonu ve iOS'ta Cupertino animasyonu “yerel” bir uygulama hissi yaratır.

MaterialPageRoute: Android standardı

MaterialPageRoute en sık kullanılan Route uygulamasıdır. Yeni ekranı aşağıdan yukarıya doğru kademeli görünümle canlandırır. Çıkışta ekran yukarıdan aşağıya doğru canlanarak orijinal konumuna döner. Araç çubuğu (AppBar) ve ekran gövdesi ayrı ayrı canlanarak bir hiyerarşi efekti oluşturur.

CupertinoPageRoute: iOS gezinme stili

CupertinoPageRoute, iOS'taki UINavigationController'ı taklit eder. Yeni ekran sağdan girerek önceki ekranı kaplar. Temel özellik, CupertinoBackGestureDetector aracılığıyla uygulanan etkileşimli geri kaydırma jesti desteğidir. Bu jest animasyonun ortasında bile işlenerek iPhone kullanıcılarının aşina olduğu doğal bir davranış sağlar.

Route Yaşam Döngüsü: Oluşturmadan Atılmaya

Route, normal bir StatefulWidget'ın yaşam döngüsünden farklı olan kendi yaşam döngüsüne sahiptir. Bu döngüyü anlamak, doğru veri başlatma, akış abonelikleri ve bir ekran kapatılırken kaynakların serbest bırakılması için gereklidir.

Route Yaşam Döngüsü Aşamaları

Route yaşam döngüsü dört ana aşamadan oluşur. Geçiş — Route oluşturulur ve girişte canlandırılır (didPush çağrılır). Aktif — Route tamamen görüntülenir ve kullanıcıyla etkileşime girer. Pasif — başka bir Route mevcut olanı kaplar (iletişim kutusu, alt sayfa), ancak Route yığında kalır. Atılmış — Route yığından kaldırılır ve yok edilir, didPop ve dispose çağrılır.

Route yaşam döngüsü yöntemleri özel bir uygulamada geçersiz kılınabilir. Örneğin, didPop Route yığından kaldırıldığında çağrılır — burada taslak verileri kaydedebilirsiniz. didChangeNext, yığındaki sonraki Route değiştiğinde çağrılır — gezinme geçmişi değiştiğinde UI'ı güncellemek için kullanışlıdır.

Flutter API Route.didPop (2026)'ya göre, Route'un yaşam döngüsünü Route içindeki State'in yaşam döngüsüyle karıştırmamak önemlidir. Route içindeki StatefulWidget'ın, sırasıyla Geçiş ve Atılmış aşamalarında çağrılan kendi initState ve dispose'u vardır. Route, iç State'inden daha uzun yaşar — Route, widget'ları geçici olarak başka bir Route tarafından gizlense bile Overlay'de kalır.

Route Aracılığıyla Ekranlar Arası Veri Aktarımı

Route hem girişte (oluşturulurken) hem de çıkışta (tamamlandığında) veri aktarmak için mekanizmalar sağlar. Route aracılığıyla doğru veri aktarımı, genel değişkenlere ve InheritedWidget'a olan ihtiyacı ortadan kaldırarak gezinmeyi tür güvenli ve öngörülebilir hale getirir.

Yeni bir ekrana veri aktarmak için alıcı widget'ın yapıcısını veya Navigator.pushNamed'deki arguments parametresini kullanın. Route içinde verilere, Route nesnesinde saklanan RouteSettings.arguments aracılığıyla erişilebilir. Bu yaklaşım tüm Route türleri için çalışır — MaterialPageRoute, CupertinoPageRoute ve özel uygulamalar.

Veri döndürmek için Navigator.pop(context, result) öğesinin ikinci argümanını kullanın. Navigator.push, pop'a iletilen değerle tamamlanan Future döndürür. Pop argümansız çağrılırsa, Future null ile tamamlanır. Bu mekanizma, Android'deki startActivityForResult ve iOS'taki completion handler'a benzer, ancak Dart Futures aracılığıyla uygulanır.

Route Yapıcısı Aracılığıyla Veri Aktarımı

MaterialPageRoute ile doğrudan Navigator.push çağrılırken, veriler hedef ekranın yapıcısı aracılığıyla iletilir. MethodChannel kullanılmaz — bu saf bir Dart etkileşimidir. Bu yaklaşım, karmaşık nesnelerin tür güvenli aktarımı için tercih edilir.

Özel Route Oluşturma Örneği

Kendi animasyonu ve veri aktarımı olan özel bir Route oluşturma örneğine bakalım. PageRouteBuilder, animasyon eğrisi ve süresi üzerinde tam kontrol ile giriş ve çıkış animasyonlarını tanımlamaya olanak tanır.

// Kaydırma animasyonlu özel Route
Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) {
    return DetailPage(productId: '42');
  },
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    const begin = Offset(0.0, 0.3);
    const end = Offset.zero;
    final tween = Tween(begin: begin, end: end);
    final offsetAnimation = animation.drive(tween);
    return SlideTransition(position: offsetAnimation, child: child);
  },
  transitionDuration: const Duration(milliseconds: 400),
));

// Ekrandan veri döndür
ElevatedButton(
  onPressed: () => Navigator.of(context).pop({'selected': true, 'id': '42'}),
  child: const Text('Seç'),
);

// Çağıran ekranda sonucu al
final result = await Navigator.push(context, MaterialPageRoute(
  builder: (context) => const SelectionPage(),
));
if (result != null) {
  print('Seçildi: ${result['selected']}');
}

Örnekte, PageRouteBuilder şeffaflıkla aşağıdan özel bir kaydırma animasyonu tanımlar. transitionDuration animasyon hızını ayarlar. Kod ayrıca sonuç aktarımını da gösterir: detay ekranı, kullanıcının seçimiyle bir Map döndürür ve çağıran ekran, push'tan Future aracılığıyla bu verileri alır. Route tam yalıtım sağlar: detay ekranındaki taslaklar liste durumunu etkilemez.