Flutter’da Expanded ve Flexible Kullanımı

Herkese merhaba. Önceki yazılarımda Column ve Row widgetlarından söz etmiştim. Bu yazım da Expanded ve Flexible’ın ne anlama geldiği ve nasıl kullanıldığından bahsettim.

Cihazımın ekranına 100 width genişliğine sahip 4 Container ekledim. Aldığım ekran çıktısı şöyle;

Şimdi ben yine 100 width genişliğe sahip bir Container daha ekliyorum ve aldığım ekran çıktısını aşağıdaki görselle sizlerle paylaşıyorum.

Yukarıdaki görselde 5'nci Container için alan olmadığını ve dolayısıyla da sığdıramadığını söylüyor. İşte bu nokta da bizlerin imdadına Expanded ve Flexible yetişiyor. Expanded ve Flexible widgetları, kullandığımız alanlara esneklik payı kazandırıyor. Yukarıdaki görselde ben Row widget’ı kullandım ancak Column’da kullansam yine yukarıdan aşağı doğru ekrana sığmasa yine Expanded ve Flexible ile çözüm üretecektim.

Şimdi ben Row içerisinde bulunan bu 5 adet Container’ın her birini Expanded Widget’ı ile sarmalıyorum. Yani diyorum ki bu Container’ı alana sığdır. İşte sonuç;

Peki diyelim ki bu Container’lardan mavi olanın diğerlerine göre iki kat daha fazla alana sahip olmasını istiyorum. O zaman da Expanded’ın flex parametresinden yararlanacağım. Yani Container’ı sığdıracağı alanı iki katına çıkaracağım. Yukarıdaki görselde Expanded’ın flex değeri varsayılan olarak 1 geliyor. Ben bunu 2 yaparsam istediğim sonucu elde etmiş olacağım.

NOT: Container’ın genişlik ve yükseklik değerlerini 100 olarak ayarlamıştık. Ancak Container’ın widget’ını Expanded ile sarmaladığımız için artık bu değerlerin bir önemi kalmadı. Siz Container’ınıza ne değer verirseniz verin Flutter Expanded widgetını dikkate alacaktır. Width değerini rastgele vererek hemen bunu ispatlıyorum.

Yukarıdaki görselde en düşük width değerini mavi Container’a verdim. Ama Expanded ile sarmalayıp flex’ini 2 yaptığım için Flutter width değerini görmezden geldi. Özetle Expanded widget’ı diğer widgetları ilgili alana sığdırmaya yarıyor. Gelelim Flexible widgetına.

Şimdi kodlarımı en başa alıp, hata aldığım hale getiriyorum.

Tıpkı Expanded’da olduğu gibi Flexible’ın flex değeri de varsayılan olarak 1 kabul ediliyor. Expanded boş bulduğun bütün alana yayıl derken, Flexible ise içerik kadar yer kapla diyor.

Aradaki farklı görebilmemiz için Container sayımı 2'ye düşürüyorum ve bu Container’ları önce Expanded ile sarıyorum ve aşağıdaki görseli paylaşıyorum.

Expanded bulduğu boşluğa Container’ı yaydı. Şimdi de Flexible ile sarmalayıp farkı görelim.

Flexible ise Container’ın genişliğini dikkate aldı ve herhangi bir genişlik vs katmadı. Buradaki dipnot şu: Flexible, Contaner’ın genişliği kadar büyüyor. Bu genişlik eğer ekrana sığmasaydı Flexible Container’ın genişliğini görmezden gelip, ekrana sığacak kadar küçültecekti. Yani Widget ekrana sığarsa Flexible müdehale etmiyor, ama sığmaz ise sığması için widgetı küçültüyor. Bu dediğim durum Flexible’ın flex değerine dokunmadığımız sürece geçerli.

Şimdi ekrana 5 adet aynı Container’dan ekledim. Flexible ile sarmaladım ve 3'ncü sıradaki Flexible’ın flex değerini 2 yaptım. Sonuç şöyle;

Gördüğünüz gibi Expanded’da olduğu gibi Flexible’da herhangi bir yayma durumu olmadı ve alanı kadar yer kapladı.

Umarım faydalı olmuştur.