Flutter Drawer Kullanımı – Flutter Geliştirme Part 2

Beraber Flutter üzerinde bir uygulama geliştirmeye başladık. Bunu yaptığımızın farkında olmayabilirsiniz ama çok aldırmayın ben de tam olarak nasıl yazacağımızı bilmiyorum. Beraber ilerleyerek, araştırarak bu uygulamayı mağazada yayınlayacağız ve sonrasında beraber de indireceğiz. Bu yazı uygulamanın geliştirme sürecimizin 2. dersine aittir. Bu yazıda uygulamanın arayüzünü yavaş yavaş oluşturmaya başlayacağız. Yazıda Flutter Drawer widget kullanımına da yer vereceğim.

debugbanner false

Debug Bannerını Kaldıralım

Uygulama geliştirmeye ilk başlayan kılların (başta ben) ilk yaptığımız hatayı yaparak size göstereceğim. Uygulamayı oluştururken uygulamayı tam ekran görmek, attığımız ekran görüntülerinde daha havalı gözükmek ya da çeşitli sebeplerden dolayı ekranın sağ üstünde bulunan yazıya gözümüzü dikeriz ve onay kaybol uleeyynn ! deriz. Uygulamanızın kök widgetına debugShowCheckedModeBanner: false, kodunu yazmanız yeterli olacaktır. 

Flutter Drawer Widgetı Nedir ?

Flutter’da widgetın ne olduğunu Flutter State Nedir Widget Nedir Stateful Nedir? başlıklı yazımda detaylıca anlatmıştım. Şimdi ise bu widgetlardan benim kullanıcı arayüzünde en pratik bulduğumu ele alalım, Drawer ! Drawer aslında bir çoğunuzun mobil uygulamalardan bildiği bir mobil menü tipidir. Kimisi bu menüyü hamburger menü olarak isimlendirmektedir. Ekranın sol yukarısında 3 çizgi ikonuna basınca sol tarafta açılan menüdür, drawer. Muhtemelen bir çoğunuz bu widgetı kullanmışsınızdır.

Flutter Drawer Kodlaması

Flutter’da Drawer’ın elbette bir çok özelliği bulunmaktadır. Ben bu özelliklerin hepsine deyinmeyeceğim ancak siz hepsine kaynak kısmında bulunan linkten ulaşabilirsiniz.

Materyal uygulama tasarımı kurallarını içerisinde bulunduran widget yani Scaffold eklemeniz gerekmektedir. Scaffold hakkında daha detaylı bilgiyi Flutter Örnek Uygulamasını incelediğim yazıdan edinebilirsiniz. Scaffold içerisinde drawer özelliği bulundurmaktadır. Bu özelliğe yeni bir drawer widgetı vermeniz gerekmektedir.

Flutter Drawer Kod Örneği
Ekran görüntüsünde görebileceğiniz Drawer’a ait kodlar

KAYNAK

Bir cevap yazın

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