Flexible: nedir, çalışma prensibi ve mobil geliştirmede yapılandırma

Flexible Nedir

Flexible, bir Flex kapsayıcısında alt öğeye esnek alan sağlayan bir sarmalayıcı widget'tır. Flexible, Expanded gibi boş alan dağıtımına katılır, ancak önemli bir farkla: Flexible'in alt öğesi, kendi boyutu kullanılabilir alandan küçükse ayrılan alandan daha az yer kaplayabilir.

Flexible, kullanılabilir alanı hesaplamak için Flutter'ın Flex algoritmasını kullanır. İlk olarak, çerçeve tüm esnek olmayan alt öğeleri (Flexible/Expanded olmayan widget'lar) sorgular ve bunların içsel boyutlarını hesaplar. Kalan alan, esnek alt öğeler arasında flex faktörlerine orantılı olarak bölünür. Alan tahsisinden sonra Flexible, fit'i kontrol eder — loose ise, alt öğe “ayrılandan büyük değil” kısıtlaması alır ve küçük kalmasına izin verilir.

Flexible'ın bir özelliği: alt widget'ın kendi minimum boyutları varsa (örneğin, uzun dizeye sahip Text), Flexible zorunlu germe olmadan istenen alanı tahsis eder. Bu, Flexible'i boyutu kapsayıcıdan ziyade içerik tarafından belirlenmesi gereken öğeler için vazgeçilmez kılar.

Özet: bir öğe için alan ayırmanız gerektiğinde ancak onu germeye zorlamak istemediğinizde Flexible kullanın. Bu, esnek düzen dağıtımını korurken içeriğin doğal boyutlarını korur.

FlexFit.tight vs FlexFit.loose

FlexFit iki değerli bir numaralandırmadır: tight ve loose. Fit seçimi, alt widget'ın ayrılan alan boyutuna zorla gerilip gerilmeyeceğini belirler.

FlexFit.tight: alt öğe tight constraints alır — minimum ve maksimum boyutlar ayrılan alana eşittir. Alt öğe, Flex algoritmasının ayırdığı alanı tam olarak kaplamalıdır. Alt öğe daha küçükse gerilir, daha büyükse büzülür. Davranış Expanded ile aynıdır.

FlexFit.loose: alt öğe loose constraints alır — minimum boyut 0, maksimum ayrılan alana eşittir. Alt öğe 0'dan maksimuma kadar herhangi bir boyutta olabilir. Alt öğe küçükse (örneğin, kısa dizeye sahip Text), doğal genişliğini kaplar ve kalan alan boş kalır.

Özet: FlexFit.loose, metin blokları ve doğal boyutlu öğeler için seçimdir. FlexFit.tight, tüm öğelerin aynı genişlikte veya yükseklikte olması gereken katı sütun düzenleri içindir.

Expanded Yerine Flexible Ne Zaman Kullanılır

Flexible ve Expanded benzer görünür ancak farklı görevleri çözer. Expanded, alt öğeyi her zaman kullanılabilir tüm alanı dolduracak şekilde gerer. Flexible, içerik boyutu ayrılan paydan küçükse alt öğenin etrafında boş alan bırakabilir.

Flexible için senaryo: bir Row içinde iki düğme var. Birincisi — “Satın Al” (kısa metin), ikincisi — “Sepete Ekle” (uzun metin). Expanded ile her iki düğme de eşit genişliğe gerilir ve kısa metinde büyük boşluk oluşur. Flexible ile her düğme metninin genişliğini alır ve boş alan aralarında veya kenarlarda kalır.

Expanded için senaryo: bir Column içinde içerikten bağımsız olarak eşit yükseklikte olması gereken üç kart var. Expanded, kullanılabilir yüksekliği eşit olarak böler ve her kart aynı boyuta gerilir. Loose ile Flexible burada çalışmaz — küçük bir kart küçük kalır ve tek tip tasarımı bozar.

Özet: içerik öğe boyutunu belirlediğinde ve etrafında boş alan kabul edilebilir olduğunda Flexible'i seçin. İçerikten bağımsız olarak tüm öğeler aynı boyutta olmalıysa Expanded'i seçin.

Flexible ile Kod Örnekleri

Örnek 1, bir Row içinde FlexFit.loose ile Flexible'in temel kullanımını gösterir.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('kısa'),
      ),
    ),
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.cyan,
        child: const Text('demo için uzun metin'),
      ),
    ),
  ],
)

Örnekte, her iki Flexible de loose fit kullanır. Kısa metinli ilk kapsayıcı doğal genişliğini kaplar. Uzun metinli ikincisi — kendi genişliğini. Row her birine kullanılabilir genişliğin yarısını tahsis eder, ancak loose fit kapsayıcıların daha küçük olmasına izin verir ve boş alan aralarında boş kalır.

Örnek 2 — bir Column içinde Tight ve Loose fit ile Flexible karşılaştırması.

Column(
  children: [
    Flexible(
      fit: FlexFit.tight,
      child: const Card(
        child: ListTile(
          title: Text('Tight — tam yükseklikte gerilmiş'),
        ),
      ),
    ),
    const SizedBox(
      height: 8,
    ),
    Flexible(
      fit: FlexFit.loose,
      child: const Card(
        child: ListTile(
          title: Text('Loose — doğal yükseklik'),
        ),
      ),
    ),
  ],
)

Column'da, ilk Flexible (tight) Kartı kullanılabilir yüksekliğin yarısına kadar gerer. İkinci Flexible (loose) — Kart içeriğine göre yükseklik alır ve kalan alan boş kalır. Görsel olarak, tight'ın alanı zorla doldurduğu, loose'un ise kompakt bir boyut koruduğu görülebilir.

Özet: üretim kodunda, Flexible with loose form alanları, düğmeler ve metin blokları için kullanılır. Flexible with tight, Expanded'a eşdeğerdir ve eşit dağıtım için kullanılır.

Flexible Kullanırken Sık Yapılan Hatalar

Hata 1: Flexible'i Flex kapsayıcısı dışında kullanmak. Expanded gibi, Flexible de Row, Column veya Flex içinde değilse LayoutException fırlatır. Çözüm: her zaman üst widget zincirini kontrol edin.

Hata 2: Flexible ve Expanded'i karıştırmak. Geliştiriciler genellikle loose fit'li Flexible gerekirken Expanded'i kullanır ve bunun tersi de geçerlidir. Sonuç: Expanded, kısa metinli bir öğeyi gererek büyük boş kenar boşlukları oluşturur. Çözüm: öğe boyutu ayrılandan daha küçük olabiliyorsa — Flexible(fit: FlexFit.loose) kullanın.

Hata 3: sıfır flex faktörü. flex=0 ile Flexible, esnek olmayan bir widget gibi davranır ve bu sezgisel olmayabilir. Geliştirici esnek davranış bekler ancak öğe minimum boyutu kaplar. Çözüm: aktif alan dağıtımı için flex ≥1 olmalıdır.

Hata 4: Boyut kısıtlaması olmadan ScrollView içinde Flexible. SingleChildScrollView içindeki bir Column'da Flexible varsa, kaydırma kapsayıcısı sonsuz alan sağlar ve flex dağıtımı çalışmaz. Çözüm: SizedBox veya ConstrainedBox kullanarak kaydırma kapsayıcısının boyutunu sınırlayın.

Özet: Flexible, Expanded gibi üst bağlama aynı dikkati gerektirir. Tek fark fit'tir — göreve göre bilinçli olarak seçin.