AutoRoute ile Basitleştirilmiş Navigator 2.0

AutoRoute: Auto-Wizard of the Navigator 2.0

Herkese selamlar. Bu yazımda sizlere AutoRoute ile Navigator 2.0 kullanımından bahsetmek istiyorum. Gelin isterseniz öncelikle neymiş bu Navigator 2.0, 1'i de mi varmış bunun, neyimize yetmemiş de 2'yi çıkarmışlar; ufak bir göz atalım :)

Navigator 1.0 vs Navigator 2.0

Navigator 1.0 ile, uygulamamız içerisinde bulunan ekranlar arasında basit bir yönlendirme yapabiliriz. Navigation stack üzerindeki hakimiyetimiz yalnızca push(yeni bir sayfaya geçiş) ve pop(sayfadan geri dönüş) komutlarını kapsamaktadır. Eğer uygulamamız complex bir navigasyon şeması içermiyorsa bu gayet yeterli olacaktır.

Navigator 2.0 ise hedefe ulaşmak için adım adım talimat verilmesi gereken bu imperative yapının aksine ulaşmak istediğimiz hedefi anlattığımız declarative bir yapı kullanarak navigation stack i tamamen kontrol etmemize olanak sağlamaktadır. Eğer bu konu hakkında daha ayrıntılı bilgi almak isterseniz aşağıda bulunan Flutter dokümantasyonuna ve makaleye göz atabilirsiniz.

Navigation and routing

Learning Flutter’s new Navigation and Routing system

Demo

Demo uygulamamız oldukça basit. Uygulamaya giriş yaptıktan sonra karşımıza iki seçenekli bir menü çıkmaktadır. Bu menüden seçilen seçeneğe göre Star Wars ve The Lord of The Rings filmleri listelenmekedir. Listelenen filmlerden biri seçildiğinde ise filmin detay sayfasına yönlendirme yapılmaktadır.

Proje koduna buradan erişebilirsiniz.

Demo App

Uygulamanın navigasyon şeması ise şu şekildedir:

Navigation Flow

Kurulum

Adım 1: Tabi ki ilk adımımız bir Flutter projesi oluşturmak. Projemizi oluşturduktan sonra auto_route, auto_route_generator ve build_runner paketlerini eklememiz gerekiyor ki bunları kullanabilelim.

flutter pub add auto_route
flutter pub add -d auto_route_generator
flutter pub add -d build_runner
flutter pub get

Adım 2: Paketlerimizi ekledik, şimdi de uygulamamız içerisindeki yönlendirme yapacağımız tüm sayfaları içeren bir router sınıfı oluşturmamız gerek.

Bunu yaparken ihtiyacınıza göre AutoRoute, CustomRoute ya da RedirectRoute kullanabilirsiniz. Örneğin; eğer sayfa geçişlerinde, “bir şeklimiz olsun, atalım şuraya bir animasyon” diyorsanız CustomRoute kullanarak transitionBuilder parametresine vereceğiniz değerler ile bunu sağlayabilirsiniz.

AppRouter

Not: Eğer AppRouter içerisindeki hiyerarşi kafanızı karıştırdıysa merak etmeyin, ilereyen aşamalarda daha ayrıntılı bir şekilde anlatmaya çalışacağım bunları.

Adım 3: Bu kodları yazdıktan sonra hata almanız, ekranınızda kırmızılıklar görmeniz gayet normal. Ne de olsa AutoRoute generated code üzerinden çalışmakta. Aşağıda yer alan komutu çalıştırarak oluşturduğunuz router sınıfını generate edebilirsiniz.

flutter packages pub run build_runner build              

Adım 4: Kurulum için son olarak, oluşturduğumuz AppRouter’ u MaterialApp.router kullanarak MaterialApp widget ına bağlamanız gerekmektedir. Bu işlemi, CupertinoApp.router u kullanarak da gerçekleştirebilirsiniz.

And voila, kurulum tamamdır. Artık istediğiniz gibi kullanıma başlayabilirsiniz.

Kullanım

Madem kullanıyoruz bu mereti, etinden sütünden faydalanalım diye düşündüm. Bu bölümde, farklı kullanım örneklerini anlatarak ilerleyeceğim.

Bunlar:

• Navigation,
• Nested Navigation,
• BottomNavigationBar,
• Route Wrappers ve Declarative Routing.

Navigation
Navigator 1.0' da olduğu gibi burada da pop, push gibi komutları kullanarak sayfalar arası yönlendirmeyi sağlayabilirsiniz.

Nested Navigation
Nested Navigation için; sub-route lara kol kanat gerecek, parent’ lık yapacak route’ u oluştururken children parametresini kullanarak nested-route ların listesini vermemiz gerekir. Demo uygulamamızda, StarWarsRouter ve LotrRouter route ları bu kullanıma örnektir.

Nested Navigation — StarWarsRouter

StarWarsRouter’u ele alalım. Bu router için;

• page: AutoRoute tarafından sunulan EmptyRouterPage olarak alınmıştır. Nested navigation işlemlerinde, parent route page olarak bu page i kullanmanız gerekmektedir.
• StarWarsMoviesScreen için path: '' olarak alınmıştır. Böylelikle StarWarsRouter a bir yönlendirme yapıldığında görüntülenecek ilk sayfanın bu olduğunu belirtmiş olursunuz. Eğer; hayır ben path ‘i dolu vermek istiyorum derseniz de bu durumda initial parametresini kullanmanız gerekmektedir.

initial Usage in Nested Navigation

• StarWarsMovieDetailScreen için ise path: ':id' olarak verilmiştir. Burada id path param olarak alınmıştır ve sayfa constructor unda @PathParam() ile annotate edilmiştir.

Passing Path Param

BottomNavigationBar
Bu yapı için Scaffold yerine AutoRoute ile birlikte gelen AutoTabsScaffold widget ını kullanmanız gerekmektedir. Seçilen index ile yönlendirme yapılacak sayfa route larının listesini sırasıyla routes parametresine vererek ve bottomNavigationBuilder parametresini kullanarak “bottom navigation” işlemini gerçekleştirebilirsiniz.

Bottom Navigation

Route Wrappers and Declarative Routing
İşte en heyecanlı kısıma geldik. Tadı damağınızda kalsın diye bu kısmı sona sakladım. Nav 2' nin aramıza kattığı en önemli şey declarative routing e olanak sağlaması. Bu sayede, push ya da pop gibi çocukları kullanmadan, gerekli state bilgilerini değiştirebilir; işin gerisini AutoRoute’ a bırakabiliriz. AutoRoute: Mahallenizin overlokçusu gibi, ayağınıza getirir her şeyi.

Örneğin; burada uygulamaya giriş yaparken kullandığımız akış için email ve şifre inputlarını iki farklı ekranda alıyoruz. Bu ekranları bir wrapper ile sararak aralarındaki yönlendirme için yalnızca AuthenticationState’ de bulunan isValidEmail parametresini güncellememiz yeterli olacaktır.

Bu yapı için bir başka örnek olarak, birçok uygulamanın temelini oluşturan Authentication işlemini ele alabiliriz. Kod üzerinde de görebileceğiniz üzere, AuthenticationState de bulunan status değerine göre bu navigasyon işlemini gerçekleştirebiliriz.

Sonuç

Evet çocuklar, benim anlatacaklarım bu kadardı. Eğer Navigation 2.0 kafa karıştırıcı geldiyse bir de AutoRoute ile birlikte bir şans vermenizi öneririm. Kim bilir belki de tadından yenmeyecek bir hale gelebilir sizin için.

Umarım, ilk makalemle sizi çıkardığım bu yolculuğu tamamlayabilmiş ve eğlenebilmişsinizdir.

Bizi aşağıdaki linklerden takip edebilirsiniz 👾

• Team Kraken Twitter hesabı
• Twitter hesabım

Bu konu hakkında araştırma yapmama vesile olan maestro’m Erkin Kurt’a kocaman teşekkürler :)