Widget Günlükleri 4 – Navigator Stratejisi

2020 yılının ilk ayından herkese selamlar! Bu sene her ay en az bir yazı eklemeyi planlıyorum bloguma ve bu doğrultuda ocak ayının ilk yazısını yazıyorum. Önceki yazımda CircleAvatar konusuna değinmiştim hatırlarsanız. 🙂 Aslında bu yazıda AppBar ve CircleAvatar’ın birlikte kullanımını anlatsam daha güzel olurdu lakin önceki yazıda söz verdiğim gibi bugün Navigator yöntemleri üzerine kısa fakat önemli bir yazı yazacağım. Hazırsanız başlayalım.

Navigator, mobil uygulamanız içerisinde yer alacak sayfaların birbirleri arasındaki geçişleri sağlayan bir sınıftır. Bu geçişler Navigator üzerinde bir stack (yığın) üzerinde birikir. Örneğin a_page->b_page->c_page geçişini Navigator.push yazarak sağlarsanız, a_page’inin state’ini uygulamanız tutmaktadır. Giriş bilgileri doğrularken veya kayıt oluştururken böyle bir yöntem kullanmak istemezsiniz tabi. 🙂 Başka bir sayfaya yönlendirdikten sonra önceki state’leri silmek için ise Navigator.pushAndRemoveUntil metotu kullanılır.

Diyelim gittiğiniz sayfadan bir geri dönüş yapmak istiyorsunuz, bunun için ise Navigator.pop kullanılır. a_page->b_page->c_page yapısında c_page üzerinde Navigator.pop metotunu çağırırsanız, sizi b_page’te bulunan en son state’e geri gönderir.

Navigator.pop, Navigator.push ve Navigator.pushAndRemoveUntil metotlarını anladıysak nasıl kullanılacaklarını da küçük kod parçalarıyla anlatayım:

Diyelim shared_pref ile bir kullanıcının daha önce giriş yaptığını kontrol ediyoruz ve eğer shared_pref üzerinde daha önce kaydettiğimiz key var ise, kullanıcıyı giriş ekranına getirmeden direkt olarak ana sayfaya yönlendirmek istersiniz. Navigator.pushAndRemoveUntil bu isteğinize uygun hareket eder.

                Navigator.pushAndRemoveUntil(
                    context,
                    MaterialPageRoute(builder: 
(context) => HomePage()),
                    ModalRoute.withName("/Home"));

Aşamalı bir kayıt işlemi gerçekleştiriyorsunuz diyelim. İlk aşamada kullanıcı bilgileri, ikinci aşamada kişisel bilgiler ve son aşamada ise gizlilik sözleşmesini onaylamasını bekliyorsunuz kullanıcıdan. Son aşamaya kadar bilgilerin taşınması gerekiyor ve aynı zamanda, kullanıcının belki değiştirmek isteyeceği bilgi olabileceğinden bir önceki sayfaya geri dönebilmesini bekliyorsunuz. Bunun için ise Navigator.push kullanımı uygun olacaktır.

Alt taraftaki kod parçasında, kullanıcıdan alınan kişisel bilgilerin, SecondPage isimli stateful class’a gönderildiğini görebilirsiniz. Bu bilgiler daha sonra veritabanına kaydedilebilir, uygulama içerisinde saklanabilir, tamamıyla sizin kararınız. 🙂 Unutmadan, bir başka class’a veri gönderebilmek için, göndereceğiniz verileri o class içerisinde tanımlamalı ve constructor’ında belirtmelisiniz.

                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return SecondPage(
                            age: age,
                            height: height,
                            weight: weight,
                            gender: gender);
                      },
                    ),
                  );

Geldik sonuncusuna, Navigator.pop, bir önceki sayfaya geçiş için kullanılır lakin hiç kullanmadığımdan ötürü elimde kod parçası yok. Flutter, sunduğu tasarım sayesinde bir önceki sayfaya geçişi appBar üzerinden sağlıyor bu yüzden kullanma ihtiyacı duymadım lakin Navigator.pop üzerinden yapacağınız bir önceki sayfaya geçiş işleminde yine Navigator.push’ta olduğu gibi veri gönderimi sağlayabilirsiniz.

Daha büyük uygulamalar için oluşturulmuş, ön tanımlı route’lardan da bahsetmesek olmaz. Main içerisinde MaterialApp’imizi çağırırken aynı anda route’lar da oluşturulur böylelikle uygulamanızın dallanmasını path bazlı bir yapıya dönüştürmüş olursunuz. Flutter’ın dökümanlarından da bu konuda yararlanabilirsiniz. Hatta küçük bir kod parçası koyayım. 🙂

void main() {
  runApp(MaterialApp(
    home: MyApp(),// '/' route
    routes: <String, WidgetBuilder> {
      '/abc': (BuildContext context) => MyPage(title: 'page ABC'),
      '/bc': (BuildContext context) => MyPage(title: 'page BC'),
      '/c': (BuildContext context) => MyPage(title: 'page C'),
    },
  ));
}

Yazının sonuna geldik. Flutter’da Navigator kullanmak oldukça kolay. Belki Github hesabım üzerinde vaktim olursa bu konuya ilişkin basit bir örnek eklemek istiyorum. Takipte kalın. 🙂