Flutter'da Navigasyon (Yönlendirme) İşlemleri:

Mobil uygulamalarda kullanıcı deneyiminin en önemli yapı taşlarından biri, ekranlar arasında akıcı ve mantıklı bir geçiş sağlayabilmektir. Flutter, bu geçişleri yönetmek için güçlü ve esnek bir navigasyon sistemine sahiptir. Bu makalede, Flutter'da sayfa yönlendirmelerinin nasıl yapıldığını, veri taşıma işlemlerini ve en iyi pratikleri inceleyeceğiz.

---

1. Navigasyonun Temel Mantığı: Stack (Yığın) Yapısı

Flutter'da ekranlar (sayfalar) üst üste binen bir yığın (stack) yapısı içinde yönetilir. Bu yapı LIFO (Last In, First Out - Son Giren İlk Çıkar) prensibiyle çalışır.

Yeni bir ekrana geçiş yaptığınızda, bu yeni ekran mevcut ekranın üzerine "eklenir" (push). Geri dönmek istediğinizde ise en üstteki ekran yığından "çıkarılır" (pop) ve altındaki ekran tekrar görünür hale gelir. Tüm bu süreci Flutter'da Navigator sınıfı yönetir.

---

2. Temel Yönlendirme: push() ve pop()

En basit navigasyon yöntemi, doğrudan bir bileşen ağacı oluşturarak yeni bir sayfaya geçmektir. Bu işlem için MaterialPageRoute kullanılır.

Yeni Bir Sayfaya Gitmek (push):

Aşağıdaki kod, butona tıklandığında kullanıcıyı IkinciSayfa isimli ekrana yönlendirir.

Dart

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const IkinciSayfa()),
    );
  },
  child: const Text('İkinci Sayfaya Git'),
)

Önceki Sayfaya Dönmek (pop):

Kullanıcıyı bir önceki ekrana döndürmek için (örneğin bir "Geri" butonunda) pop metodu kullanılır.

Dart

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

---

3. İsimlendirilmiş Rotalar (Named Routes) ile Düzenli Gezinme

Küçük uygulamalarda push() pratik olsa da, uygulama büyüdükçe rotaları merkezi bir yerden yönetmek kodun okunabilirliğini ve bakımını kolaylaştırır. Bunun için isimlendirilmiş rotalar kullanılır.

Öncelikle, uygulamanızın ana dosyası olan MaterialApp içinde rotaları tanımlamalısınız:

Dart

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const AnaSayfa(),
    '/detay': (context) => const DetaySayfasi(),
    '/ayarlar': (context) => const AyarlarSayfasi(),
  },
)

Bu tanımlamadan sonra, herhangi bir ekrandan diğerine geçmek çok daha kısa ve temiz hale gelir:

Dart

// Detay sayfasına gitmek için:
Navigator.pushNamed(context, '/detay');

---

4. Ekranlar Arası Veri Taşıma

Uygulamalarda genellikle bir ekrandan diğerine veri göndermemiz gerekir (örneğin, listeden seçilen bir ürünün ID'sini detay sayfasına iletmek).

Yöntem 1: Constructor (Yapıcı Metot) ile Veri Gönderme

Temel yönlendirme yaparken veriyi doğrudan sayfanın constructor'ına parametre olarak geçebilirsiniz.

Dart

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetaySayfasi(kullaniciAdi: 'Nuri'),
  ),
);

Yöntem 2: İsimlendirilmiş Rotalarda Argüman Gönderme

pushNamed kullanırken veriyi arguments parametresi ile iletebilirsiniz:

Dart

Navigator.pushNamed(
  context, 
  '/detay', 
  arguments: 'Nuri', // String, Object, Map vb. gönderilebilir
);

Gidilen sayfada bu veriyi okumak için:

Dart

final String gelenVeri = ModalRoute.of(context)!.settings.arguments as String;

---

5. Modern ve Ölçeklenebilir Çözüm: go_router

Flutter ekibi, özellikle web desteği, derin bağlantılar (deep linking) ve karmaşık yetkilendirme (auth) akışları içeren modern uygulamalar için Navigator 2.0 (Router API) tabanlı paketlerin kullanılmasını önermektedir. Bu alanda en popüler ve resmi olarak desteklenen paket go_router paketidir. 

---

Bu makalede Flutter’da sayfalar arası geçiş (navigation) işlemlerini sıfırdan başlayarak profesyonel seviyeye kadar öğreneceğiz.

Flutter’da navigasyon işlemleri temel olarak:

• 🔹 Navigator (Stack mantığı)

• 🔹 Named Routes (İsimlendirilmiş rotalar)

• 🔹 Veri gönderme & geri veri alma

• 🔹 Route yönetimi (pushReplacement, pushAndRemoveUntil)

• 🔹 Modern Router yapısı (Navigator 2.0 mantığı)

üzerinden gerçekleştirilir.

---

1️⃣ Flutter’da Navigasyon Mantığı

Flutter’da navigasyon, bir stack (yığın) mantığıyla çalışır.

📌 Mantık şudur:

• Yeni sayfa aç → Stack’in üstüne eklenir.

• Geri dön → Üstteki sayfa silinir.

Bunu yöneten yapı:

Navigator

---

2️⃣ Basit Sayfa Geçişi (Navigator.push)

🎯 Senaryo:

Ana sayfadan ikinci sayfaya geçelim.

---

🔹 main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnaSayfa(),
    );
  }
}

---

🔹 Ana Sayfa

class AnaSayfa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Ana Sayfa")),
      body: Center(
        child: ElevatedButton(
          child: Text("İkinci Sayfaya Git"),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => IkinciSayfa()),
            );
          },
        ),
      ),
    );
  }
}

---

🔹 İkinci Sayfa

class IkinciSayfa extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("İkinci Sayfa")),
      body: Center(
        child: ElevatedButton(
          child: Text("Geri Dön"),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

---

🔎 Açıklama

Kod	Görev
Navigator.push	Yeni sayfa açar
MaterialPageRoute	Sayfa geçiş animasyonu sağlar
Navigator.pop	Önceki sayfaya döner

---

3️⃣ Veri Göndererek Sayfa Açma

Şimdi ikinci sayfaya veri gönderelim.

---

🔹 Veri Gönderme

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => IkinciSayfa(isim: "Nuri"),
  ),
);

---

🔹 İkinci Sayfa Constructor

class IkinciSayfa extends StatelessWidget {
  final String isim;

  IkinciSayfa({required this.isim});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("İkinci Sayfa")),
      body: Center(
        child: Text("Merhaba $isim"),
      ),
    );
  }
}

---

4️⃣ Geri Veri Döndürme (Result Dönme)

Bir sayfadan veri geri döndürmek mümkündür.

---

🔹 İkinci Sayfada

Navigator.pop(context, "Başarılı");

---

🔹 Ana Sayfada Sonucu Yakalama

onPressed: () async {
  final sonuc = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => IkinciSayfa()),
  );

  print(sonuc);
}

📌 await kullanmak zorunludur.

---

5️⃣ Named Routes (Daha Profesyonel Yapı)

Büyük projelerde route’ları merkezi yönetmek gerekir.

---

🔹 MaterialApp içinde

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => AnaSayfa(),
    '/ikinci': (context) => IkinciSayfa(),
  },
);

---

🔹 Sayfa Açma

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

---

6️⃣ pushReplacement

Yeni sayfaya geçer ve önceki sayfayı siler.

📌 Login ekranı → Ana sayfa geçişinde kullanılır.

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => AnaSayfa()),
);

---

7️⃣ pushAndRemoveUntil (Stack Temizleme)

Tüm sayfaları temizleyip yeni sayfa açar.

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (_) => AnaSayfa()),
  (route) => false,
);

📌 Genelde logout işleminde kullanılır.

---

8️⃣ Bottom Navigation Bar ile Navigasyon

Eğer uygulama alt sekmeli yapıdaysa:

int seciliIndex = 0;

final List<Widget> sayfalar = [
  AnaSayfa(),
  ProfilSayfa(),
];

body: sayfalar[seciliIndex]

---

9️⃣ Navigator 2.0 (Router API)

Flutter’ın modern yönlendirme sistemidir.

Özellikle:

• Web uygulamalarında

• URL senkronizasyonunda

• Büyük projelerde

kullanılır.

Bu sistem:

• RouteInformationParser

• RouterDelegate

• GoRouter (3rd party)

mantığına dayanır.

---

🔟 GoRouter (Modern Yöntem)

Profesyonel projelerde en çok kullanılan paket:

go_router

🔹 pubspec.yaml

dependencies:
  go_router: ^latest

---

🔹 Basit Örnek

final router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => AnaSayfa(),
    ),
    GoRoute(
      path: '/ikinci',
      builder: (context, state) => IkinciSayfa(),
    ),
  ],
);

MaterialApp yerine:

MaterialApp.router(
  routerConfig: router,
);

---

🚀 Gerçek Projelerde Navigasyon Mimarisi

Profesyonel projelerde:

• 🔹 Auth Guard

• 🔹 Route Guard

• 🔹 Deep Linking

• 🔹 Nested Navigation

• 🔹 ShellRoute (GoRouter)

• 🔹 Bloc / Provider ile route kontrolü

kullanılır.

---

📊 Navigator Metodları Özeti

Metod	Açıklama
push	Yeni sayfa aç
pop	Geri dön
pushNamed	İsimle aç
pushReplacement	Öncekini sil
pushAndRemoveUntil	Stack temizle
popUntil	Belirli route’a kadar dön

---

🎯 Hangi Yöntem Ne Zaman?

Proje Tipi	Önerilen
Küçük proje	Navigator.push
Orta ölçekli	Named Routes
Büyük proje	GoRouter
Web uyumlu	Router API

---

📌 Sonuç

Flutter navigasyon sistemi:

✔ Stack mantığıyla çalışır
✔ Veri gönderme ve geri alma destekler
✔ Profesyonel route yönetimi sağlar
✔ Web için Router API destekler

---