En Yeni Konular

Flutter : Navigation Drawer

Navigation Drawer

Flutter’da Navigation Drawer oluşturmak için Scaffold’umuzun drawer: özelliğinden yararlanırız.

Drawer ne diyecek diye soracak olursak, kısaca açılabilir menü diye tanımlayabiliriz.

Örnek üzerinden ilerleyelim

Uygulamanın iskeleti

Bu şekilde hiç bir özellik belirletmeden kullanırsak, AppBar solunda bir icon ve icon’a tıklanınca soldan sağa bir bar açılacaktır.

Drawer içerisinin doldurulması

Drawerimizin child özelliğine bir Listview ekleyerek içerisine ListTile bir kaç eleman ekleyelim

Tabiki ListView ile sınırlı değiliz Flutter’da herşey widget olduğu için istediğimiz herşeyi eklemekte özgürüz.

Navigation Drawer

 

Drawer’imize Header ekleyelim

Flutter Ekibi tarafından Material Design standartları baz alınarak oluşturulmuş, DrawerHeader ile drawerimizi üst tarafına Container benzeri bir kısım ekler.

Örnek için bir resim eklendi

Navigation DrawerHeader

User Accounts DrawerHeader

Veya yine Flutter içerisinde ön tanımlı olarak gelen, Kullanıcı isim mail vb gibi kısımları olan User Accounts DrawerHeader kullanabiliriz.

User Accounts DrawerHeader

Herhangi bir seçeneğe tıklandığında menünün kapanmasını istiyorsak Listile onTap özelliğine Navigator.of(context).pop(); ekleyebiliriz.

Örneğin Tamamı

Navigation Drawer Örnek

Hakkında Necip Akgöz

İLGİNİZİ ÇEKEBİLİR

Flutter : Expanded Ve Flexible

BaşlıklarNavigation DrawerUygulamanın iskeletiDrawer içerisinin doldurulmasıDrawer’imize Header ekleyelimUser Accounts DrawerHeaderÖrneğin Tamamı Expanded Row, Column, Flex içerisindeki …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir