Flutterda Navigator()

Selamlar. Bir süredir flutter çalıştığımı ve öğrendiklerimi burada paylaşacağımı söylemiştim. İşte karşınızda ikinci yazım!

Bu sefer BMI Calculator isimli vücut kitle endeksini hesaplayan bir uygulama yaptım ve bu uygulamada ilk defa birden fazla sayfa kodlamayı deneyimledim. Uygulamanın detaylı kodlarına github adresimden erişebilirsiniz. Dolayısıyla bu yazımda size sayfaları birbirine bağlamayı sağlayan Navigator den bahsedeceğim.

Navigatorler, stack yapısı kullanarak uygulamanızda sayfalar arasında (route lar arasında da diyebiliriz) gezinmenizi sağlar.

Get Dilara Kardaş’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Flutterda sıklıkla kullanılan 4 tane Navigator fonksiyonu vardır. Bunlar:

1. Navigator.push()
2. Navigator.pop()
3. Navigator.pushReplacement()
4. Navigator.pushAndRemoveUntil()

Şimdi uygulamamda kullandığım kodları inceleyelim:

Navigator.push(context,
  MaterialPageRoute(builder: (context) => ResultsPage(...))
);

Navigator.push(), context ve route isimli iki paramtere alır. context mevcut sayfanın widget ağacındaki konumunu belirtirken route açılacak yeni sayfanın nasıl görüneceği, animasyonlarının nasıl olacağı ve widget ağacındaki konumu ile ilgili yönlendirmeleri içerir. Örneğin android cihazlarda yeni sayfa sağdan sola doğru açılırken ios cihazlarda aşağıdan yukarı doğru açılır. Yukardaki kodda bu detaylar MaterialPageRoute() da belirtilir ve MaterialPageRoute() un builder parametresi alması zorunludur

//butona basıldığında önceki sayfaya döner.
BottomButton(
  onTap: (){
    Navigator.pop(context); 
  },

Navigator.push() da bu kadar detay varken Navigator.pop() sadece context parametresini içerir çünkü pop işlemi yeni sayfayı stackten kaldırarak bir önceki sayfaya geri döner ve bu işlem için ekstra bilgilere veya yeni bir rota tanımlamaya gerek yoktur. Hangi sayfanın kapatılacağını anlamak için context bilgisini olması yeterlidir.

Navigator.pushReplacament(context,
  MaterialPageRoute(builder: (context) => NewPage(...))
);

Navigator.pushReplacament() metodu da düzen olarak Navigator.push() ile aynıdır. Aradaki tek fark replacament da eski sayfanın stackden kaldırılmasıdır. Yani yeni sayfaya geçtikten sonra geri dönmek istediğinizde eski sayfaya geçemezsiniz. Bu metod çoğunlukla login sayfaları için kullanılır. Yani kullanıcıyı giriş yaptıktan sonra direkt anasayfaya yönlendirmek isterseniz bu metodu kullanmalısınız.

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
  (Route<dynamic> route) => false, // Bütün sayfaları siler
);

Navigator.pushAndRemoveUntil() fonksiyonu, daha karmaşık navigasyon senaryoları için kullanılır. Bu fonksiyon, yeni bir sayfa açarken, belirli bir sayfaya kadar olan tüm önceki sayfaları stackden kaldırır. Yani, sadece istediğiniz sayfayı bırakır ve geri dönüş yapıldığında o sayfaya kadar olan geçmişi temizler.

Navigator.pushAndRemoveUntil() fonksiyonu, üç parametre alır. İlk iki parametre tıpkı Navigator.push ve Navigator.pushReplacament de olduğu gibi context ve route dur. Üçüncü olarak ise predicate isimli bir parametre alır. predicate, boolean tipinde koşul belirten bir fonksiyondur. Bu koşul, yığındaki hangi sayfanın kalacağını ve hangi sayfaların silineceğini belirler. Predicate fonksiyonu true döndürdüğünde o sayfa yığında kalır, false döndürdüğünde ise o sayfa silinir.

Sonuç olarak Navigatorler sayfalar arası yönlendirmeyi sağlar.

Yazdıklarımda eksikler olabilir ama bu yazıları öğrendikten maksimum 1 ay sonra buraya yazıyorum. Yani bunlar benim için taze bilgiler. 😊Deneyim kazandıkça buraları güncelleyeceğim. Yine de geri bildirim vermek isterseniz bana linkedin adresimden ulaşabilirsiniz.