Flutter Navigasyon Temelden İleri Düzeye: Temel Ekran Degistirme

Merhaba 👋 Uzun bir süredir aklımda olan bu seriye sonunda başlıyorum. Bu seri boyunca, Flutter’da ekranlar arası geçişleri yönetmek için kullanabileceğimiz yapıları en basit seviyesinden en kompleks seviyesine kadar ele alacağız.

https://itome.team

Bu makalede aşağıdaki başlıklara değineceğim;

• Navigator Nedir?
• Basit Navigation (Imperative Navigation)

Navigator Nedir?

Ekranlar arası geçiş işlemlerini anlatmadan önce bu işlemleri yöneten yapıdan bahsedelim.

Navigator sınıfı sayesinde ekranlar arasındaki geçiş işlemlerini yönetebiliyoruz. Uygulamada farklı ekranlara geçiş yapmak istediğimizde Navigator API kullanarak bu işlemi gerçekleştirebiliriz. Bu sayede uygulamanın farklı ekranları arasında rahatlıkla geçiş yapabilir ve kullanıcı deneyimini artırabiliriz.

Navigator API kullanarak bir çok navigation işlemini yapabilirsiniz. Bunlardan bazıları;

• Farklı bir ekrana geçiş yapabiliyor. (push)
• Mevcut ekrandan bir önceki ekrana gidebiliyor. (pop)
• Ekranlar arası geçiş animasyonlarını yönetebiliyor. (PageRouteBuilder)
• Mevcut ekranla belirttiğimiz farklı bir ekranı değiştirebiliyor. (replace)
• Arkaplanda bir ekran olup olmadığını kontrol edebiliyor. (canPop)
• Belirli bir ekrana kadar geriye gidebiliyor. (popUntil)
• Bir ekrana geçiş yaparken arkaplandaki bütün ekranları yığından kaldırabiliyor. (pushAndRemoveUntil)

Bu makalede sadece push ve pop işlemlerini ele alacağım. Eğer merak ettiğiniz başka bir API varsa, lütfen yorumlarda belirtin.

Basit Navigation (Imperative Navigation)

Basic Navigation (DartPad):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator Demo',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Page'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go Back'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
    );
  }
}

Yukarıdaki örnekte A ekranında B ekranına geçiş için örnek yapıyı bulabilirsiniz. Biz aşağıdaki kısımla ilgileneceğiz.

Yukarıda gördüğünüz “Navigator.of(context)” ile daha önce bahsettiğim Navigator sınıfını çağırıyoruz. Peki bu sınıfı bizler daha önce oluşturmadık nereden geliyor? Bu sınıf MaterialApp widget’ı altında otomatik olarak oluşturulur. Context gücünü kullanarak widget hiyerarşisinde Navigator’ın doğru instance’ına erişebiliyoruz.

MaterialPageRoute ise, bir sayfanın geçiş animasyonlarını yönetmek ve geri butonu işlevselliği sağlamak için kullanılan bir sınıftır. Bu sınıf, belirli bir sayfanın oluşturulmasını ve yönetilmesini sağlar. Bir sayfaya geçiş yapmak için Navigator.of(context).push() metodu kullanılır ve yeni sayfayı açmak için MaterialPageRoute sınıfı kullanılır. Ayrıca Navigator sınıfı, ekran yığınlarını Overlay API aracılığıyla yönetir.

Belirtmek isterim ki başka bir sayfaya geçiş sırasında bu sınıfı kullanmak zorunda değilsiniz! Bu sadece belirli bir iskelet üzerinde ilerlememizi sağlayan yardımcı sınıftır. Route sınıfından yeni bir sınıf türeterek kendiniz de yönetebilirsiniz.

Navigator.of(context).pop() işlemi, ekran yığınından (screen stack) en üstteki ekranı kaldırmak için kullanılır. Yani, mevcut ekrandan önceki ekrana geri dönmek istediğimizde bu işlemi kullanabiliriz.

Belirtmek isterim ki daha büyük ve karmaşık projelerde bahsettiğimiz ekranlar arası geçiş yönteminin tercih edilmediğini göreceksiniz. Bunun yerine daha çok isimlendirilmiş route yapısı kullanılır. Bu durumun ana sebebini bir sonraki bölümde ele alacağız.

Bir sonraki serilerde aşağıdaki konulara değineceğim:

• İsimlendirilmiş Navigation
• İç İçe Navigation Yapısı
• Router Nedir?
• Navigation 2.0 (Declarative Navigation)
• Deeplink Navigation
• Deferred Deeplink Navigation

Navigator class - widgets library - Dart API

DartPad

Overlay class - widgets library - Dart API