FLUTTER AUTO ROUTER TAB NAVIGATION
Merhabalar bu yazımızda Flutter auto router ile tab navigation nasıl yapabiliriz ondan bahsediyor olacağız. Öncelikle flutter projesi oluşturalım.
Proje Oluşturma
Auto Router Paketlerinin yüklenmesi
adresinden daha detaylı notlara erişebilirsiniz.
pubspec.yaml dosyası üzerinde ilgili dependleri ekliyoruz.
Sayfaların Oluşturulması
Bir stateless birde stateful olmak üzere iki adet sayfa oluşturuyorum.
bu iki sayfayı tab olarak kullanacağız.
Routerların Oluşturulması
proje içerinde app_router.dart isimli router dosyamızı oluşturuyoruz, ve aşağıdaki gibi bir kodlama yapıyoruz.
yukarıdaki kodları açıklayacak olursak auto router paketi bizim için @MaterialAutoRouter isimli bir (anotasyon,decorator) sağlıyor ve içerisine ilgili route tanımları yapmamıza olanak sağlıyor. Burada dikkat etmemiz gereken AutoRoute dedikten sonra / isimli path öncelikli olarak açılacağı ve altında children bulundurmasıdır, bunu sayfaya karşılık gelecek olan TabsPage birazdan kodluyor olacağız , fakat ondan önce altındaki child routerlara isim verdiğimize dikkat edin (bu ismi kullanıyor olacagız) , boş router sayfamızın aldında ise ilk elemanın TabsPageOne olması şu anlama gelecektir /posts/ oldugunda TabsPageOne açılsın , diğer bir route tanımında ise /users/ oldugunda TabsPageTwo açılmasını istediğimi söylüyorum.
Dipnot: Tab router yapmak için en az iki routera ihtiyacımız oldugunu unutmayın aksi halde hata alacaksınız.
Ardından aşağıdaki komutu çalıştırarak;
hey benim route dosyamda değişiklik olursa bunları izle ve yeniden routerları oluştur, bu bize aşağıdaki gibi bir yapının çıktı vermesini sağlayacak.
auto router görevini yaparak bizim yapacağımız işlerden bizi kurtarıyor.
Şimdi sırada kodlamamız gereken iki sayfa daha mevcut , ilk öncelikle uygulamamız main.dart dosyası üzerinden başlıyor ve bizim uygulamaya hey senin routerların bunlar dememiz gerekiyor işte onları tam olarak şu şekilde yapıyoruz.
sıra geldi artık Tabların bulunacağı TabsPage sayfasına , bu sayfayı oluşturmak için bir kaç çeşitli yöntem
linkte mevcut, daha sade bir yapı olarak ;
AutotabsScaffod yapısını kullanarak , tabları , arka plan renkli , appbar , animation , drawer … gibi yapıları düzenleyebildiğimiz bir Widget mevcut içerisinde öncelikle bir appbar tanımlıyorum her iki tab içinde aynısını kullanmak adına, routes ise bir array içerisinde isimlendirme yaptıgımız routerları unutmayalım onları sırasıyla veriyoruz unutmayalım hangi sırayla verirsek ilgili tablar o sıraya göre çalışacaktır.
Daha sonra bottomNavigationBuilder özelliğini kullanarak currentIndex’in tabsRouter sınıfı içerisindeki activeIndex oldugunu onTap durumunda ise gene aynı class üzerinden mevcut indexin değişeceğini söylüyoruz ve bizim için otomatik olarak sayfa geçişleri sağlanıyor , peki ya aşağıdaki BottomNavigationBarItem nedir diye bakıcak olursak , adından anlışalacağı üzerine iki adet Buton gibi düşünebiliriz , icon vermenin zorunlu oldugunuda unutmayalım. :) Daha sonra projemizi çalıştırıyoruz ;
veee mutlu son;
