Flutter’da Sayfalar Arası Geçişler

Kategori Featured, Flutter
08.04.2023
140 Okunma

Flutter’da tek sayfa tasarımını yapmak kadar, oluşturulan çoklu sayfalar arasındaki geçişi sağlamak da önemlidir. Bazen bir sayfadan diğerine geçerken, önceki sayfaya geri dönülmesini istemeyebiliriz ya da bir sayfada kullanıcıdan edindiğimiz bir bilgiyi, başka bir sayfada kullanmak isteyebiliriz.

Bu makalede sizlere Flutter’da sayfalar arası geçişlerin nasıl yapıldığıyla ilgili ayrıntıları aktaracağım. Basit olanından, ayrıntılı olanına doğru bir yolculuğa çıkacağız.

1) Navigator.push & MaterialPageRoute & Navigator.pop

İlk olarak sayfalar arası geçişler için Navigator sınıfını kullanacağız. Bu amaçla üç sayfalı bir örneği incelemekle başlayacağız. Şimdi bu konuya özel Flutter’da yeni bir proje başlatın ve aşağıdaki gibi; Sayfa 1Sayfa 2 ve Sayfa 3 şeklinde üç sınıf oluşturun. Bu üç sayfayı sadece geçişler için kullanacağımızdan herhangi bir içerik girmemize şimdilik gerek yok.

Kodu çalıştırdığımızda Sayfa 1 sınıfı inşa edilecektir ve ekranda aşağıdaki sayfa gözükecektir.

Ekranda bulunan Sayfa 2’ye Git düğmesine basıldığında Navigator.push(…) constructor’ı (yapıcı metodu) tetiklenmiş olacaktır.

Navigator.push iki parametre almaktadır. Biri context, diğeri de yeni sayfayı inşa etmeye yarayan MaterialPageRoute sınıfıdır.

MaterialPageRoute ile anlık olarak bir sayfa tasarımı sunulup, önceki sayfadan gelen kullanıcı, yeni oluşturulan sayfaya yönlendirilmiş olur. Yeni sayfanın özellikleri, MaterialPageRoute içerisindeki builder: parametresi ile verilir.

Sayfa2 sınıfı daha önceden hazır olduğu için builder parametresindeki fonksiyon, direkt olarak Sayfa2‘ye döndürülür.

MaterialPageRoute(builder: (context) => Sayfa2())

Böylece birinci sayfadan, ikinci sayfaya geçiş yapmış olduk.

İkinci sayfada iki buton bulunmaktadır. Bunlardan biri Geri dön! diğeri de, Sayfa 3’e Git! butonudur. Üçüncü sayfaya geçiş yapmamızı sağlayan butonda, bir önceki sınıfta olduğu gibi, Navigator.push komutu bulunmaktadır. Birinci sayfadan, ikinci sayfaya nasıl geçtiysek, ikinci sayfadan üçüncü sayfaya da aynı mantıkla geçebiliriz.

Fakat yeniden birinci sayfaya geri dönmek istersek, Navigator.pop(…) komutunu kullanmamız gerekir.

Geri dön! butonuna basıldığında, onPressed parametresinde görebileceğiniz gibi,

onPressed: () => Navigator.pop(context)

ifadesi yer alır. (Sayfa2 sınıfı, 37. satır) Bu sayede istersek ilk sayfaya geri dönebiliriz. Geri dönme işlemini bu butonla yapabildiğimiz gibi, cihazımızda bulunan Geri düğmesi ile de aynı işlemi yapabiliriz. Ayrıca tasarımımızda bir AppBar kullandığımız için, otomatik olarak AppBar üzerinde de bir geri dönme butonu aktif olacaktır. Üstteki resimde geri dönme işlemini yapabileceğimiz üç bölge kırmızı yuvarlakla gösterilmiştir.

Böylece üçüncü sayfaya gelmiş olduk. Sayfa 3 sınıfında da görebileceğiniz gibi, üçüncü sayfada sadece bir Geri dön! butonu bulunur ve bizi ikinci sayfaya taşır.

Bu şekilde hazırladığımız bu üç sayfa arasında kolaylıkla geçiş yapabildik. Şimdi biraz daha ayrıntıya girelim.

Kaynak : Flutter’da Sayfalar Arası Geçişler | by Zeki ÇIPLAK | Flutter Türkiye | Medium

Comments of this post

Henüz yorum bulunmuyor!