Container, Column, Row…
Flutter ile uygulama yazmaya başlamadan önce temel bileşenlerin (yani orijinal adıyla temel widget’ların) iyi bilinmesi gerekiyor. Bu yazımızda hemen her uygulamada kullanılabilen temel bileşenlerin (şimdilik) üçünü ayrıntılı olarak işleyeceğiz.
1. Container
Türkçeye de geçmiş bir kelime olan (Konteyner) Container’ı, içerisine nesneler yerleştirebileceğimiz bir kutu olarak tanımlayabiliriz. Flutter’da oluşturduğumuz Container Widget’ı, bize yapacağımız tasarım için sınırlarını belirleyeceğimiz bir alan sağlar. Bu alanı, kendi sahip olduğu parametrelerle dilediğimiz gibi şekillendirebiliriz.
Widget içerisindeki tüm parametreler opsiyoneldir. Yani her parametreyi kullanmak zorunda değilsiniz. Yukarıdaki kodu, Material Design tasarımdaki Scaffold() widgetının body: parametresinde aşağıdaki gibi kullanabilirsiniz.
Kodu Flutter projenizde bulunan main.dart dosyasına ekleyip, çalıştırdığınızda ortaya çıkan görüntü aşağıdaki gibi olacaktır.
Container’a daha farklı bir görünüm katmak için decoration: parametresini kullanabiliriz. Bu parametrede kullanacağımız BoxDecoration() widget’ı ile Container’ımıza resim ekleyebilir, kenarlarını ovalleştirebilir, etrafına sınır (border) çizebilir ve gölgeli bir yapıya kavuşmasını sağlayabiliriz. Şimdi decoration parametresini kullanarak Container’ımızı biraz değiştirelim. Container’ın decoration parametresini aşağıdaki gibi düzenleyelim.
Container’daki color: parametresini kaldırıyoruz. Çünkü decoration parametresindeki BoxDecoration() widgetında da color: var, ikisini de kullanırsak hata alırız. Daha sonra width değerini Containerımızın tam yuvarlak olması için 300 yapıyoruz. Hizalama (Alignment) parametresini de bottomCenter yaparak, Containerımızın child: parametresine girdiğimiz, Text() widget’ının ortada ve alt kısımda gözükmesini sağlıyoruz. Ayrıca Container widgetını Center() widget’ı ile kaplayarak, tüm yapının ekranın tam ortasında (hem sağdan-sola ortada, hem de yukarıdan-aşağıya ortada) olmasını sağlıyoruz. Tüm bu değişikliklerin ardından, kodumuz şu hale geliyor:
Son düzenlemelerle birlikte oluşan yeni görüntü.
2. Column
Column kelimesi Türkçe’de kolon olarak adlandırılır. Column Widget’ı, Container’dan farklı olarak, children: parametresine sahiptir. Children parametresi bir Widget listesi (<Widget>[ , , , ]) alır. Bu da kolon içerisine birden fazla Widget eklenebileceği anlamına gelmektedir. Eklenen her Widget, üst üste ekleniyor gibi sonuç verir.
Column widgetının children parametresinden başka önemli 2 parametresi daha vardır. Bunlar mainAxisAlignment: ve crossAxisAlignment: parametreleridir. Column’dan en iyi şekilde faydalanmak için bu parametrelerin nasıl çalıştığını iyi bilmeliyiz. mainAxisAlignment parametresi, Column içerisinde verilen widgetları yukarıdan-aşağıya hizalamaktadır. Örneğin, mainAxisAlignment: MainAxisAlignment.center olarak ayarlanırsa, Column içerisine eklenen tüm (children) widgetlar, yukarıdan aşağıya hizada ortalanır. crossAxisAlignment ise, tahmin edebileceğiniz gibi, sağdan-sola hizalama yapar. Örneğin, crossAxisAlignment: CrossAxisAlignment.start olarak ayarlarsanız, Column içerisindeki tüm widgetları, hepsi en sağa gelecek şekilde hizalamış olursunuz.
Şimdi Column’ı daha iyi anlatmak için widget listesindeki her widgetı Button (Düğme) yapalım ve nasıl göründüklerini inceleyelim.
Şimdi tüm kodu yazarak, yine main.dart dosyanızda çalıştırabilirsiniz. Son haliyle tüm kod şu şekilde oluyor:
MainAxisAlignment ve CrossAxisAlignment değerlerini değiştirerek, Column içerisine girilen tüm children widgetların durumlarını aşağıdaki GIF resminde görmek mümkündür.
3. Row
Row kelimesi Türkçe’de satır olarak bilinir. Bu widgetın Column’a benzer bir kullanımı vardır. Row için geometrik olarak Column’ın 90 derece tersidir diyebiliriz.
Column, bünyesindeki children widgetları, dik olarak yapılandırırken, Row ise aynı widgetları yatay olarak yapılandırmaya yardımcı olur. Row’un da en önemli üç parametresi, yukarıdaki Column örneğinde verilen parametrelerdir. Kullanımları Column’a göre biraz farklıdır.
Column’daki MainAxisAlignment parametresi, yukarıdan-aşağıya hizalama yaparken, aynı parametre Row içerisinde kullanıldığında, sağdan-sola hizalama yapar. CrossAxisAlignment için de yine Column’a göre tam tersi geçerlidir.
Row ile Column arasındaki farkı en iyi şekilde anlayabilmek için yukarıdaki Column kodunu aynen Row için de kullanabiliriz. Kodda hiçbir değişiklik yapmadan bu şekilde kullanalım. (Sadece sağdan-sola değişimi daha iyi görebilmek için, Container’ın width değerini 400 yapalım.)
main.dart dosyamızdaki Column’ı, Row ile değiştirdikten sonra, tüm Row durumlarını anlatan GIF resmi aşağıdaki gibi olacaktır. Kodu sürekli değiştirerek kaydedin ve Hot Restart (Windows için: CTRL+Shift+F5) yapın.
En çok kullanılan widgetlardan olan Container, Column ve Row ile ilgili temel bilgiler bu kadar arkadaşlar. Takıldığınız yerleri makale altından soru olarak iletebilirsiniz.
Zeki ÇIPLAK (Twitter: https://twitter.com/zekihocanet)
