Widget Günlükleri 6 – Dropdown Menu

Merhabalar. Mart ayının Flutter yazısıyla karşınızdayım. Bugünki yazımızın konusu açılır menüler yani dropdown menüler ile ilgili olacak. Bir önceki ayın yazısını henüz okumadıysanız sizi AppBar kullanımı ile karşılayalım.

Dropdown nesneler web alanında gayet popüler. Kullanıcıya bir seçim yaptırmak için kullanılabilecek dropdown menüler aynı zamanda navigasyon için dahi kullanılabilir. Tasarımsal olarak sizin tercihinize kalmış bu tabi. 🙂 Kişisel olarak opsiyon belirtme amacıyla kullanmayı tercih ediyorum.

Bir dropdown menü oluşturmak için önce dropdown içerisinde göstereceğimiz nesnenin sınıfını oluşturalım.

Flutter Class, Code Snippet
Sınıfımızı oluşturalım.

Sınıfımızı oluşturduktan sonra dropdown menu içerisinde göstereceğimiz nesneleri bir liste haline getirelim. Bu listede sadece text, sadece icon veya her ikisini de birden gösterebilirsiniz. Oluşturduğunuz modele uygun olarak birçok widget’ı ekleyebilirsiniz. Ucu açık. 🙂

Flutter code snippet, dropdown menu
Listeyi oluşturdum ve seçili opsiyonu tutmak için private bir değişken oluşturdum.

initState içerisine ufak bir parça kod ekleyerek, dropdown menu widget’ının çağrıldığı ilk anda 0 indisindeki verinin gösterilmesi için ufak bir düzenleme yaptım.

Flutter dropdown menu, code snippet
Dropdown menu seçeneğinin, seçilmeden önce boş kalmaması için ufak bir kod

Daha sonrasında fonksiyonuma basit bir scaffold ve ardından body kısmına ortalanmış bir şekilde DropdownButton ekliyorum. DropdownButton iki farklı değeri zorunlu olarak alır: items ve onChanged. Items kısmında göstereceğiniz seçenekler yer alır. onChanged kısmında ise kullanıcı bir etkileşime girdiğinde o etkileşimin sonucunda ne olacağını belirleyeceğiniz kod parçacıkları yer alır.

Flutter Dropdown button kullanımı
DropdownButton kullanımı

Son olarak projemizi hot reload ettiğimizde göreceğimiz sonuç aşağıda ektedir:

Flutter’da arayüz elementlerini kullanmak ve proje içerisinde uygun yerlere yerleştirmek gerçekten kolay görüldüğü üzere. 🙂 Bir başka yazıda görüşmek üzere!

Please follow and like us: