Flutter Expanded ve Flexible Arasındaki Fark Nedir ?

Flutter’da genelde responsive tasarım amaçlı sıkça kullanılan Layout Widget’lerdir.

Aslında Expanded Widget’i , Flexible Widget’inin fit property’sine “FlexFit.tight” atanmış halidir.

Yani ,

Expanded(
child:Container(),

)

Bu üstteki kod ile alttaki kod farklı görünse de aynıdır.

İkisinide kullanabiliriz.


Flexible(

fit: FlexFit.tight,

child:Container(),

)

Gelelim Farklarına.

Expanded Widget’i child’ının boyutunu olabildiğince arttırmak isterken Flexible Widget’i child’ının yeteri kadar alana sahip olmasını ister.

Örneğin ,

İlk satırda 2 adet Expanded var ve göründüğü gibi ekranın o kısmı 2 ye bölüştürülmüş.

İkinci satırda Expanded büyüyebildiği kadar büyümüş ama Flexible yüzünden önü kesilmiş.Flexible ise yazının sığması için olabildiğince kendini küçük tutmuş.

Üçüncü satır genelde kafa karıştırmaktadır.

Hani Expanded tüm ekranı kaplıyordu ? Neden orada boşluk duruyor benzeri sorular gelebilir.Bunun nedeni flex property’sidir.

Flex property’si Flexible dolayısıyla Expanded Widget’inde bulunan bir oranlama property’sidir.Ve default değeri 1’dir.

Üçüncü örnekte bu oran Flexible’ye 1 Expanded’e 1’dir.Yani toplamları 2 ve o satırda başka widget yok yani ekran %50 ye %50 olarak bölüştürülmüştür.Expanded kendi hakkı olan %50’yi babalar gibi kullanırken Flexible %50 yerine sığabileceği en küçük boyuta kendini almış.

Eğer üçüncü örnekte Expanded’in flex değerlerini arttırırsanız beyazlığın yavaş yavaş kapanacağını görebilirsiniz çünkü oransal olarak Expanded büyüyor.(Ama flex değerlerini ne yaparsanız yapın asla orası tamamen dolmaz çünkü Flexible’nin flex’i default olarak 1 atandı.)

Merak edenler için üstteki örneğin kodları :

return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 2),color: Colors.blue,),
                    child: Text("BenExpanded"),
                  ),
                ),
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 2),color: Colors.blue,),
                    child: Text("BenExpanded"),
                  ),
                )
              ],
            ),
            Row(
              children: [
                Expanded(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 2),color: Colors.blue,),
                    child: Text("BenExpanded"),
                  ),
                ),
                Flexible(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 2),color: Colors.red,),
                    child: Text("BenFlexible"),
                  ),
                )
              ],
            ),
            Row(
              children: [
                Flexible(
                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 2),color: Colors.red,),


                    child: Text("BenFlexible"),
                  ),
                ),
                Expanded(

                  child: Container(
                    decoration: BoxDecoration(border: Border.all(color: Colors.black,width: 2),color: Colors.blue,),
                    child: Text("BenExpanded"),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );