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 1, Sayfa 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( debugShowCheckedModeBanner: false, home: Sayfa1(), )); } class Sayfa1 extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Sayfa 1")), body: Center( child: RaisedButton( child: Text("Sayfa 2'ye Git!", style: TextStyle(fontSize: 20)), onPressed: () => Navigator.push( context, MaterialPageRoute(builder: (context) => Sayfa2()), ), ), ), ); } } class Sayfa2 extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Sayfa 2")), body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ RaisedButton( child: Text("Geri dön!", style: TextStyle(fontSize: 20)), onPressed: () => Navigator.pop(context), ), RaisedButton( child: Text("Sayfa 3'e Git!", style: TextStyle(fontSize: 20)), onPressed: () => Navigator.push( context, MaterialPageRoute(builder: (context) => Sayfa3()), ), ), ], ), ), ); } } class Sayfa3 extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("Sayfa 3")), body: Center( child: RaisedButton( child: Text("Geri dön!", style: TextStyle(fontSize: 20)), onPressed: () => Navigator.pop(context), ), ), ); } } |
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.
2) Navigator.pushReplacement
Bazen sayfalar arasında dolaşırken, kullanıcının önceki sayfaya dönmemesini istediğimiz durumlar olabilir. Örneğin, bir Login sayfasından doğru şifre ve kullanıcı adı ile giriş yapıp, yeni bir sayfaya gelen kullanıcının, (zaten giriş yapmış olduğu için) yeniden Login sayfasına gitmesini engellemek isteyebiliriz.
İşte bu ve buna benzer durumlar için, Navigator.push yerine Navigator.pushReplacement(…) yapıcı metodunu kullanabiliriz. Bu sayede girilen sayfadan bir önceki sayfaya gidiş mümkün olmayacaktır.
Yukarıda verdiğimiz kodda bazı değişiklikler yaparak, bu örneği de önceden hazırladığımız 3 sayfa ile yeniden deneyebiliriz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( debugShowCheckedModeBanner: false, home: Sayfa1(), )); } class Sayfa1 extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Login Sayfası')), body: Center( child: RaisedButton( child: Text("Login!", style: TextStyle(fontSize: 20)), onPressed: () => Navigator.pushReplacement( //Navigator.push( context, MaterialPageRoute(builder: (context) => Sayfa2()), ), ), ), ); } } class Sayfa2 extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Sayfa 2 - Login oldunuz...')), body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ // Geri dönülecek bir sayfa yok! // RaisedButton( // child: Text("Geri dön!", style: TextStyle(fontSize: 20)), // onPressed: () => Navigator.pop(context), // ), RaisedButton( child: Text("Sayfa 3'e Git!", style: TextStyle(fontSize: 20)), onPressed: () => Navigator.push( context, MaterialPageRoute(builder: (context) => Sayfa3()), ), ), ], ), ), ); } } class Sayfa3 extends StatelessWidget { Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Sayfa 3')), body: Center( child: RaisedButton( child: Text("Geri dön!", style: TextStyle(fontSize: 20)), onPressed: () => Navigator.pop(context), ), ), ); } } |
Değişen ikinci kodumuzda, Sayfa 1 sınıfını inceleyelim. Önceki kodda, Navigator.push(…) olarak kullanılan bölümün, şimdi Navigator.pushReplacement(…) ile değiştirildiğini görüyoruz. Bu durumda ikinci sayfaya geçtiğimizde, birinci sayfaya Navigator.pop(…) ile geri dönmek mümkün değildir. Sayfa 2 sınıfını incelediğimizde, önceki kodda yer alan Geri dön! butonunun kaldırıldığını görüyoruz. Çünkü ikinci sayfaya Navigator.pushReplacement ile gelindiği için, birinci sayfa artık yok hükmündedir. Aynı şekilde AppBar üzerinde de geri dönme butonu aktif edilmemiştir ve cihazdaki Geri tuşuna basıldığında da uygulamadan çıkıldığını deneyerek görebilirsiniz.
Sayfa 2 sınıfında yorumla kapatılan bölümü aktif edip, denerseniz hatalı bir ekran görüntüsü alacağınızı görebilirsiniz. O yüzden, Navigator.pushReplacement(…) yapıcı metodunu kullanırken, bu durumu mutlaka göz önünde bulundurmanız gerekir.
Eğer kullanıcının bir şekilde mutlaka önceki sayfaya erişmesi gerekiyorsa, bunun Navigator.pop ile değil, yeniden Navigator.push veya Navigator.pushReplacement veya benzeri bir yapıcı metodla gerçekleştirilmesi gerekir.
Not: Yazı için sayın Zeki Çıplak’a teşekkür ederiz.
Kaynak : Flutter’da Sayfalar Arası Geçişler | by Zeki ÇIPLAK | Flutter Türkiye | Medium
İlk Yorumu Siz Yapın