Expanded: nedir ve Flutter'da nasıl çalışır

Expanded Nedir

Expanded, bir alt öğeyi alan ve onu Flex kapsayıcısında (Row, Column, Flex) kullanılabilir alanı dolduracak şekilde genişlemeye zorlayan bir sarmalayıcı widget'tır. Expanded'ın kendi görsel temsili yoktur — yalnızca alt öğeye iletilen kısıtlamaları (constraints) yönetir.

Expanded'ın temelinde Flutter çerçevesi tarafından sağlanan Flex mekanizması bulunur. Row veya Column, alt öğelerinin boyutlarını hesaplarken, önce esnek olmayan öğelere (sabit boyutlu normal widget'lar) alan tahsis eder, ardından kalan alanı Expanded ve Flexible alt öğeleri arasında flex faktörleriyle orantılı olarak dağıtır.

Expanded, Flexible.fit = FlexFit.tight kullanır. Bu, Expanded'ın alt öğesinin, kendi boyutu daha küçük olsa bile, tahsis edilen tüm alanı kaplaması gerektiği anlamına gelir. Alt öğenin tahsis edilen alandan daha küçük olabildiği Fit.loose ile Flexible'ın aksine, Expanded içeriği zorla genişletir.

Özet: Expanded, Flutter'da orantılı düzenler oluşturmak için birincil araçtır. Bir öğenin garantili olarak tüm kullanılabilir genişlik veya yüksekliği doldurması gerektiğinde kullanın.

Expanded vs Flexible: Temel Farklar

Expanded ve Flexible her ikisi de Flex kapsayıcılarında alan dağıtır, ancak temelde farklı davranır. Fark, alt öğenin kullanılabilir alandan daha küçük olup olamayacağını belirleyen fit özelliğinde yatar.

Expanded'ın katı bir davranış modeli vardır: fit değeri FlexFit.tight'a eşittir. Bu, alt widget'ın kullanılabilir alana eşit kısıtlamalar aldığı anlamına gelir — ne fazla ne eksik. Alt öğe daha küçükse genişler, daha büyükse küçülür. Flexible, FlexFit.loose kullanarak alt öğenin tahsis edilen alan içinde herhangi bir boyutta olmasına izin verir.

Pratikte: bir Row, flex=1 ile iki Expanded içeriyorsa, her biri genişliğin tam yarısını kaplar. Bunları fit.loose ile Flexible ile değiştirirseniz, her alt öğe kendi boyutu daha küçükse yarıdan daha küçük olabilir — kalan alan boş kalır.

Özet: katı orantılı düzenler için Expanded kullanın, alt öğe kullanılabilir alandan daha küçük olabildiğinde Flexible kullanın. Emin değilseniz — Expanded ile başlayın, daha öngörülebilir davranış sağlar.

Flex Faktörü: Alan Nasıl Dağıtılır

Flex faktörü (flex parametresi), bir Expanded'ın alacağı kullanılabilir alanın oranını belirleyen sayısal bir değerdir. Varsayılan olarak flex=1'dir, bu da tüm Expanded alt öğeleri arasında eşit dağılım anlamına gelir.

Dağıtım algoritması üç adımda çalışır. Birinci: Flutter, tüm esnek olmayan alt öğelerin içsel boyutunu hesaplar. İkinci: kalan alan, tüm flex faktörlerinin toplamına bölünür. Üçüncü: her Expanded, flex faktörü ile bir flex biriminin boyutunun çarpımına eşit bir pay alır.

Örneğin, 300px genişliğinde bir Row iki Expanded içerir: birincisi flex=2, ikincisi flex=1 ile. Boş alan (300px eksi esnek olmayan alt öğeler) 3 parçaya bölünür. Birincisi 2/3 alır, ikincisi 1/3 alır. Esnek olmayan alt öğe yoksa, birincisi 200px, ikincisi 100px alır.

Flex faktörü herhangi bir pozitif tam sayı olabilir. 0 değeri özel bir durumdur: flex=0 ile Expanded, normal bir esnek olmayan widget gibi davranarak alt öğenin boyutuna göre minimum alan kaplar. Bu davranış, Expanded'ın olmamasına eşdeğerdir.

Özet: flex faktörü, esnek düzenler oluşturmanın anahtarıdır. Eşit sütunlar için 1:1, ana ve yan alanlı paneller için 2:1, dar navigasyonlu arayüzler için 3:1 oranlarını kullanın.

Expanded ile Kod Örnekleri

Örnek 1, üç eşit sütun oluşturmak için Row'da Expanded'ın temel kullanımını gösterir.

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
      ),
    ),
  ],
)

Bu örnekte, flex=1 (varsayılan) ile üç Expanded, Row'un genişliğini eşit olarak böler. Kapsayıcılar, Row tarafından belirlenen tam yüksekliğe kadar genişler ve eşit paylar alır. Bu yaklaşım, orantılı dağılımla sütun tabanlı düzenler oluşturmak için uygundur.

Örnek 2, kenar çubuğu ve ana içerikle bir düzen oluşturmak için farklı flex faktörlerinin kullanımını gösterir.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.grey.200,
        child: const Center(
          child: Text('Kenar çubuğu'),
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.white,
        child: const Center(
          child: Text('İçerik alanı'),
        ),
      ),
    ),
  ],
)

İkinci örnek, bir kenar çubuğu (%25) ve ana içerik alanı (%75) ile tipik bir düzen oluşturur. flex=1 ve flex=3, 1:3 oranı verir. Ekran genişliği değiştiğinde, oranlar otomatik olarak korunur — bu, uyarlanabilir arayüzlerin temelidir.

Özet: farklı flex faktörleriyle Expanded, uyarlanabilir düzenler oluşturmak için standart bir araçtır. Column içinde Expanded kombinasyonu, hem yatay hem de dikey orantılı düzenlemeler oluşturmayı sağlar.

Expanded Kullanırken Sık Yapılan Hatalar

Hata 1: Expanded'ı Row, Column veya Flex dışında kullanmak. Expanded'ı doğrudan Stack, ListView veya Flex olmayan başka bir kapsayıcıya yerleştirirseniz, Flutter "Expanded widgets must be placed inside Flex widgets" mesajıyla bir LayoutException fırlatır. Çözüm: üst widget'ı kontrol edin — yalnızca Row, Column veya Flex.

Hata 2: shrinkWrap belirtmeden ListView içinde Expanded kullanmak. ListView varsayılan olarak kaydırma yönünde sonsuz yüksekliğe sahiptir ve Expanded payını hesaplayamaz. Çözüm: shrinkWrap: true kullanın veya ListView'ı sabit yükseklikte bir SizedBox ile sarın.

Hata 3: toplam flex'i kullanılabilir alanı aşan birden çok Expanded. Sınırlı genişlikte bir Row, Expanded'ın yanı sıra büyük içsel boyuta sahip widget'lar içeriyorsa, taşma meydana gelebilir. Çözüm: esnek olmayan alt öğelerin minimum boyutlarını kontrol edin ve gerekirse FittedBox veya Flex fit kullanın.

Hata 4: Row içindeki Column'da iç içe Expanded. Bir Column içindeki Expanded, bir Row içinde başka bir Expanded içeriyorsa, kısıtlama çatışması oluşabilir. Çözüm: iç içe geçme derinliğini sınırlayın veya ara seviyelerde boyutları açıkça ayarlamak için ConstrainedBox kullanın.

Özet: Expanded, doğru üst bağlamı gerektirir. Expanded'ın doğrudan Row, Column veya Flex içinde yerleştirildiğinden her zaman emin olun ve açık boyutlar olmadan iç içe geçmekten kaçının.