Flutter Container, Row, Column, Stack

Merhabalar, öncelikle Flutter ile Container, Row, Column ve Stack kavramlarına geçmeden önce widget kavramını kabaca anlatmak istiyorum. Zira bunu anladığınızda diğer terimlerin kullanım mantığını daha iyi anlayacağınızı düşünüyorum. Gelelim widget nedir? Evet widget yapısına başlamadan önce şunu söylemekte fayda var Flutter tasarım deseninde hemen hemen tüm yapılar birer widgettir. Hatta bu widgetler iç içe bile kullanılabilir. Aslında widgetlere basitçe Flutter’da tasarımı yaparken kullandığımız bileşenler desek çokta yanlış bir ifadede bulunmuş olmayız. Aklınızda basit bir mobil uygulama canlandırın. En temelinde ekranda ne vardır, bir metin/yazı yani bir Text bileşeni. İşte bu bir widgettir. Uygulamanın üstünde gördüğümüz bar(AppBar) buda bir widgettir. Başta da belirttiğim gibi Flutter uygulamalarındaki hemen hemen her şey bir widgettir. Basitçe widgetin ne olduğunu anladıysak gelelim bu yazıdaki asıl konumuza.

Container Nedir?

Flutter uygulamalarında container yapısı içerisine çeşitli özellikler eklediğimiz tasarımların sınırlarını belirleyen bir widget alanıdır.

Aşağıdaki görselde görüldüğü üzere bir Row widgetimiz var row kısmına yazımızın devamında değineceğiz. İçerisinde üç farklı Container özelliği tanımlanmış durumda. Buradan da görüldüğü üzere Container içerisinde yükseklik, genişlik, renk ve daha bir çok özellik barındırabildiğimiz, verdiğimiz sınırlar çercevesinde bu özellikleri barındıran bir widgettir.

flutter-container

Row Nedir?

Row kelimesinin Türkçe karşılığı satır anlamına gelmektedir. Bunu bir excel dosyasındaki satır mantığına benzetebilirsiniz. İçerisinde bulunan widgetları yatay olarak barındırmaya yardımcı olur. Row içerisinde ki widgetları yine içerisinde tanımlayacağımız çeşitli özellikler (widget) ile yatayda konumlandırabilir ve daha birçok işlev gerçekleştirebiliriz. Tabi ki bu işlevlerin detaylı anlatımı başka bir yazıda olacak. Burada Row widgetinin temel mantığını anlamaya çalışıyoruz. Aşağıdaki görselde görüleceği gibi Container widgetlerimizi içerisinde tutan bir Row kapsayıcı widgeti oluşturduk ve bunları yatayda konumlandırdık.

flutter-row

Column Nedir?

Column kelimesinin Türkçe karşılığı kolon demektir. Yani aynı Row örneğinde olduğu gibi içerisinde bir ve daha fazla widget bulunabilir. Bu widgetleri dikey olarak barındırmaya yardımcı olur. Yine içerisinde ki birçok widget ve özellik ile dikeyde bir çok işlem yapmamıza olanak sağlar. Aşağıdaki resimde görüldüğü gibi Column içerisinde widgetler oluşturup bunları dikeyde konumlandırdık.

flutter-column

Stack Nedir?

Stack Flutter uygulamalarında widgetleri üst üste konumlandırmaya yarayan bir widgettir. Stack kullanımı Flutter uygulamalarında oldukça güzel ve kullanışlı tasarımlar çıkarmamıza yardımcı olur. Bir çok widgeti, yapıyı bir arada kullanarak çılgın tasarımlar yapabilirsiniz. Aşağıdaki görselde basit bir örnek verilmiştir. Bu görselde ilk Container’ımız daha büyük bir alana diğerleri de kademe kademe küçülerek basit bir yapı oluşturmuş durumda.

flutter-stack

Bir cevap yazın

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