Flutter: Expanded, Flexible ve Spacer ile Layout Kontrolü

Flex tabanlı düzenlerde alanı doğru paylaşmak çoğu zaman arayüzün kalitesini belirler. Expanded, Flexible ve Spacer bu iş için benzer görünür ama farklı davranır.

Live Demo

Aşağıdaki interaktif örnekte Expanded widget'ını deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Hangi Durumda Hangisi?

• Expanded: Kalan alanı doldurur.
• Flexible: İçeriğe daha esnek yaklaşır.
• Spacer: Sadece boşluk bırakır.

Bu konu, "flutter expanded flexible spacer", "row layout control" ve "overflow fix" gibi aramalara uygundur.

Expanded ile Alan Doldurma

Row(
  children: [
    const Icon(Icons.person),
    const SizedBox(width: 12),
    Expanded(
      child: TextField(
        decoration: const InputDecoration(hintText: 'Name'),
      ),
    ),
  ],
)

Flexible ile Daha Yumuşak Kontrol

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(
        color: Colors.amber,
        child: const Text('Flexible content'),
      ),
    ),
  ],
)

Spacer ile Boşluk Yönetimi

Row(
  children: [
    const Text('Start'),
    const Spacer(),
    const Text('End'),
  ],
)

Taşma Hatalarını Azaltma

Flex widget'ları doğru yerde kullanıldığında Row ve Column içinde overflow riskini azaltır. Özellikle metin, ikon ve buton birlikte olduğunda Expanded çoğu zaman kritik rol oynar.

Pratik Senaryo: Ürün Kartı

Row(
  children: [
    const SizedBox(width: 64, height: 64, child: Placeholder()),
    const SizedBox(width: 12),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: const [
          Text('Product name'),
          Text('Product description'),
        ],
      ),
    ),
    const Icon(Icons.chevron_right),
  ],
)

Sık Sorulan Sorular

Spacer içerik taşır mı?

Hayır. Sadece boşluk üretir.

Flexible her zaman Expanded yerine kullanılabilir mi?

Hayır. Expanded daha sıkı bir alan kontrolü isterken Flexible daha serbest davranır.

Bu widget'lar yalnızca Row içinde mi kullanılır?

Hayır, Column içinde de kullanılabilir.

Özet

Expanded, Flexible ve Spacer doğru kullanıldığında Flutter layout kontrolü çok daha temiz hale gelir. Bu üçlüyü ayırabilmek, daha az hata ve daha profesyonel bir görünüm sağlar.