Navigator: nedir, Flutter'da ekran yönetimi

Flutter'da Navigator Nedir

Navigator, Route nesnelerinden oluşan bir yığını yöneten ve Flutter uygulamasında ekran navigasyonunu uygulayan bir widget'tır. Her push çağrısı, yığının en üstüne yeni bir Route koyar, pop en üstteki Route'u kaldırır ve önceki ekrana döner. MaterialApp, tüm uygulama için otomatik olarak bir Navigator oluşturur ve Navigator.of(context) aracılığıyla erişilebilir hale getirir.

StatefulWidget'ın aksine, içerik değiştirme tek bir widget içinde setState aracılığıyla gerçekleşirken, Navigator kendi yaşam döngüsüne sahip tam ekranlarla çalışır. Yığındaki her Route, kendi BuildContext'ine sahip izole bir durumdur, bu da bellek sızıntılarını önler ve bağımlılık yönetimini basitleştirir. Pop çağrıldığında, kullanılmayan Route yok edilir ve kaynaklar serbest bırakılır.

Flutter Navigasyon Kılavuzu'na (2026) göre, Navigator emir kipi API'den (Navigator 1.0) bildirimsel API'ye (Navigator 2.0) evrilmiştir. Navigator 1.0, push/pop yöntemlerini doğrudan kullanır ve basit senaryolar için uygundur. Navigator 2.0 (Router), derin bağlantılar, uyarlanabilir navigasyon ve web yönlendirmesi olan uygulamalar için uygundur.

Navigator'ün perde arkasında nasıl çalıştığı

Dahili olarak, Navigator Overlay'i kullanır — Routes'ları üst üste görüntüleyen özel bir widget. Her Route, yığındaki derinliğine karşılık gelen bir z-index ile Overlay'de kendi konumunu oluşturur. Bu, push çağrıldığında yeni ekranın neden önceki ekranın üzerinde animasyon gösterdiğini ve pop çağrıldığında önceki ekranın neden görüntülenmeye hazır olduğunu açıklar: önceki ekran yok edilmedi, yeni ekranın altındaki Overlay'de kaldı.

Geçiş animasyonları için Navigator, ThemeData'da geçersiz kılınabilen PageTransitionsTheme'i kullanır. Platforma özgü animasyonlar, iOS için CupertinoPageRoute (sağdan kaydır) ve Android için MaterialPageRoute (aşağıdan kaydır) aracılığıyla ayarlanır. PlatformRoute kullanılırken Navigator otomatik olarak doğru animasyonu seçer.

Navigator Yöntemleri: push, pop ve pushReplacement

Navigator, Route yığınını yönetmek için bir dizi yöntem sağlar. Her yöntem, basit bir geçişten ekran geçmişinin tamamen değiştirilmesine kadar belirli bir navigasyon görevini çözer. Kullanım örnekleriyle ana yöntemleri inceleyelim.

Push ve Pop: temel işlemler

push yöntemi bir Route alır ve pop sırasında iletilen sonuçla bir Future döndürür. Bu, gidilen ekrandan veri alınmasını sağlar. Örneğin, bir tarih seçici ekranı, Navigator.pop(context, selectedDate) aracılığıyla bir DateTime döndürebilir. pop yöntemi argümansız null döndürür, argümanlı olarak çağıran ekrana değer iletir.

PushReplacement: ekran değiştirme

pushReplacement, geçerli Route'u yenisiyle değiştirir ve mevcut route'u yığından kaldırır. Bu, kullanıcının önceki ekrana dönmemesi gereken senaryolar için kritiktir. Tipik bir örnek — giriş ekranı: başarılı girişten sonra, geçerli ekran ana ekranla değiştirilir ve Geri düğmesi giriş formuna dönmez.

Adlandırılmış Rotalar ve onGenerateRoute

Navigator, pushNamed yöntemi aracılığıyla adlandırılmış rotalarla navigasyonu destekler. Doğrudan bir Route oluşturmak yerine, geliştirici bir dize tanımlayıcısı belirtir ve Navigator, MaterialApp'deki yapılandırmaya göre Route'u otomatik olarak oluşturur. Bu, kodu basitleştirir ve rota tanımını tek bir yerde merkezileştirir.

Adlandırılmış rotalar, MaterialApp'teki routes özelliği aracılığıyla tanımlanır; burada her anahtar bir yol dizesidir ve değer bir Widget döndüren bir fonksiyondur. Dinamik rotalar (parametreli) için onGenerateRoute kullanılır — RouteSettings alan ve bir Route döndüren bir geri çağrı. Bu, arguments parametresi aracılığıyla argümanların iletilmesine ve derin navigasyonun uygulanmasına olanak tanır.

Flutter Cookbook'a (2026) göre, pushNamed aracılığıyla argüman iletimi, arguments: Object? parametresiyle yapılır. Alıcı ekran, ModalRoute.of(context)!.settings.arguments aracılığıyla argümanları çıkarır ve global değişkenler veya InheritedWidget olmadan tür güvenli veri aktarımı sağlar.

Bilinmeyen rotaları işleme

MaterialApp'teki onUnknownRoute özelliği, pushNamed'in var olmayan bir rotayla çağrıldığı durumları işler. Bu, 404 ekranı göstermek veya ana sayfaya yönlendirmek için kullanışlıdır. onGenerateRoute ile kombinasyon halinde, olası tüm navigasyon senaryolarının tam kapsamını sağlar.

Navigator 2.0 ve Bildirimsel Router Navigasyonu

Navigator 2.0 (Router API olarak da bilinir), Flutter 2.0'da tanıtılan bildirimsel bir navigasyon yaklaşımıdır. Geliştiricinin push/pop çağırdığı emir kipi Navigator 1.0'ın aksine, Router durum aracılığıyla navigasyonu yönetir ve tarayıcı URL'sini geçerli ekranla otomatik olarak senkronize eder. Bu, özellikle web uygulamaları ve masaüstü sürümleri için önemlidir.

Navigator 2.0 mimarisi üç temel bileşenden oluşur: RouteInformationParser URL'yi bir rota yapılandırmasına ayrıştırır, RouterDelegate yapılandırmayı bir Route listesine dönüştürür ve BackButtonDispatcher sistem Geri düğmesini işler. Bu mimari, navigasyonu tamamen tahmin edilebilir ve test edilebilir hale getirir.

Navigator 2.0 ile çalışmayı basitleştirmek için sarmalayıcı paketler vardır: go_router (Google tarafından önerilir), auto_route ve beamer. go_router, RouterDelegate'ı manuel olarak uygulamadan iç içe navigasyon, yönlendirmeler ve derin bağlantıları destekleyen rotalar tanımlamak için bildirimsel bir DSL sağlar. pub.dev'e (2026) göre, go_router bildirimsel yaklaşımı tercih eden yeni Flutter projelerinin %35'inde kullanılmaktadır.

Flutter Uygulamasında Navigasyon Örneği

Adlandırılmış rotalar ve ekranlar arasında veri iletimi ile Navigator örneğini inceleyelim. Kod, bir ürün listesi ekranını, detay ekranına geçişi ve sonuçla dönüşü gösterir.

// Route configuration in MaterialApp
MaterialApp(
  initialRoute: '/',
  onGenerateRoute: (RouteSettings settings) {
    if (settings.name == '/') {
      return MaterialPageRoute(
        builder: (context) => const ProductListPage(),
      );
    }
    if (settings.name == '/product') {
      final productId = settings.arguments as String;
      return MaterialPageRoute(
        builder: (context) => ProductDetailPage(productId: productId),
      );
    }
    return MaterialPageRoute(
      builder: (context) => const NotFoundPage(),
    );
  },
)

// Navigation with data passing
final result = await Navigator.pushNamed(
  context,
  '/product',
  arguments: 'product_42',
);

// Getting data on the receiving screen
final args = ModalRoute.of(context)!.settings.arguments as String;

// Replace screen after login
Navigator.pushReplacementNamed(context, '/home');

// Clear stack to main screen
Navigator.pushNamedAndRemoveUntil(
  context,
  '/home',
  (route) => false,
);

Örnekte, Navigator.pushNamed ürün kimliğini detay ekranına iletir. Navigator.pop(context, updatedProduct) aracılığıyla dönüşte, çağıran ekran result değişkeninde güncellenmiş verileri alır. pushReplacementNamed yetkilendirmeden sonra geçerli ekranı değiştirir ve (route) => false koşuluyla pushNamedAndRemoveUntil yığını tamamen temizleyerek önceki ekranlara geri dönüşü engeller.