Flutter-Scaffold

Merhaba…

Geçtiğimiz günlerde, İstanbul Çırak Atölye’nin ev sahipliğiyle ilk sunumumu gerçekleştirdim. Bu sunumda; Flutter’a genel bir bakış ve bir uygulama örneği yaptık. Bu uygulamada Flutter’ın Widget yapısını, eksik olduğu noktalarını ve bu eksik noktalar için geçici çözümleri inceledik.

Bana bu adımı atmamda destek veren GDG Tekirdağ’a teşekkür ederim.

Fotograf için Hüseyin Hasan’a teşekkür ederiz.

Bu blogpost seri halinde olacak. O yüzden serinin bu bölümünde Flutter’ın Scaffold sınıfından bahsedeceğim.

En temel soru Scaffold Nedir ?

Scaffold Flutter’ın içinde bulunan bir sınıftır. Bu sınıf Appbar, Bottomnavigationbar, Drawer gibi bir çok özelliği içinde barındırır.

Örneklerle bu sınıfı biraz inceleyelim ;

AppBar

• Appbar içinde bulundurduğu actions, leading ve bottom parametleriyle kişiseleştirebilir, esnek bir yapıya sahiptir.

Actions:

Bu özellik Appbar’ın sağ tarafını temsil ediyor. Buraya icon, text, buton vb. bileşenler tanımlanabilir. Aşağıdaki örnekte 4 tane ikon tanımlanmıştır.

Leading:

Bu özellik ise Appbar’ın sol tarafını temsil ediyor. Action’dan farkı ise sınırlı bir alana sahip olması. Yani yan yana 4 tane icon koyamıyoruz. Aşağıdaki örnekte bu özelliği sınırlarını zorlayarak iki tane bileşen tanımladım :)

Bottom:

Bu özelliği kullanmak için diğerlerinden farklı bir yol izlemek gerekiyor.

Öncellikle aşağıdaki kütüphaneyi import ediyoruz.

Import işleminden sonra DefaultTabController içinde bir Scaffold sınıf tanımlamamız gerekiyor.

Appbar için anlatacaklarım bu kadardı, şimdi diğer bir özellik olan Drawer’ı inceleyelim.

Drawer

• Drawer, yana açılır menüyü temsil ediyor. Bu özelliği Twitter’ın yana açılır menüsüne benzer bir örnek yaparak inceleyelim.

• İlk olarak Drawer içinde UserAccountDrawerHeader sınıfını kullanarak profil fotografı, kullanıcı adı ve kullanıcı mailini gösterelim. Bu sınıf bize bahsettiğimiz 3 özelliği zaten hazır olarak bize veriyor.

• Daha sonra 4 tane FlatButton.icon kullanarak profil, listeler, anlar, ayarlar sekmesi ekleyelim.

Son olarak bottomNavigationBar’ı inceleyelim.

BottomNavigationBar

• BottomNavigationBar, yani altta bulunan geçişli bir menü.

Bu yazımda anlatacaklarım bu kadardı. Bir sonraki yazım Widget’ların yaşam döngüsü (Lifecycle) hakkında, göz atmak isterseniz ;

Flutter-Lifecycle