Tabbar Tasarımı

Bu öğrenme içeriğinde, mobil uygulamada kullanılacak menü tasarımı için Tabbar tasarımını yapacağız.

İlk olarak, Tabbar menüsünü inceleyerek başlayalım. 

Tabbar menü, bir Footer elementi üzerine eklenmiş, kullanıcıları ilgili ekranlara yönlendiren ikon butonlar içeren dört kolondan oluşan bir Row elementi üzerinde hazırlanmıştır. Mobil uygulama için bu Tabbar menüsünün tasarım sürecine şimdi geçiş yapalım.

Başlangıç olarak, mobil uyumluluğu göz önünde bulundurarak bir uygulama oluşturacağız. Tabbar menüsünü, uygulamanın ana ekranı olacak ve daha sonra detaylarıyla ele alacağımız "Homepage" ekranında tasarlayacağız.

1. Yeni bir mobil uygulama oluşturduktan sonra Homepage isimli ekranı açın. 
2. Ekrana bir Footer elementi sürükleyip bırakın.
3. Footer elementi içerisine bir Row elementi ekleyin ve dört kolonlu yapıya dönüştürün.
4. İlk kolon içerisine bir ikon sürükleyip bırakın.
5. İkon seçimi yapın ve ikonun rengini değiştirin.
6. Kolonu seçin ve hizalama işlemlerini gerçekleştirin.
7. Ardından diğer kolonlara da bir ikon sürükleyip bırakın.
8. Her bir kolon içerisindeki ikonlar için ikon seçimlerini yapın ve bulundukları kolonlar içinde hizalayın.

Tabbar menümüz hazır. Artık ihtiyaç duyduğumuz diğer ekranlarda bu menüyü kopyalayıp yapıştırarak kullanabiliriz.