Flutter: Expanded, Flexible ve Spacer Karşılaştırması

Expanded, Flexible ve Spacer çoğu zaman birbirine karıştırılır. Oysa üçü de Flex tabanlı düzenlerde farklı bir iş yapar. Doğru seçim yapmak, taşma hatalarını önler ve arayüzü daha kontrollü hale getirir.

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.

Temel Fark

• Expanded: Kalan alanı sıkı şekilde doldurur.
• Flexible: Kalan alanı esnek şekilde kullanır.
• Spacer: Boş alan üretir, içerik taşımaz.

Bu konu, "flutter expanded vs flexible", "flutter spacer" ve "row column layout" gibi aramalarda doğrudan çözümdür.

Expanded Nedir?

Expanded, parent Row veya Column içinde kalan alanı child'a verir.

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

Flexible Nedir?

Flexible, child'ın alanı kullanmasına izin verir ama onu tamamen doldurmaya zorlamaz.

Row(
  children: [
    Flexible(
      fit: FlexFit.loose,
      child: Container(color: Colors.green),
    ),
  ],
)

Bu davranış, özellikle içeriğin doğal boyutunu koruması gerektiğinde faydalıdır.

Spacer Ne İşe Yarar?

Spacer, yalnızca boşluk oluşturur. Görünür widget taşımaz.

Row(
  children: [
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

Ne Zaman Hangisi Kullanılır?

• Alanı mutlaka doldurmanız gerekiyorsa Expanded
• Widget'ın esnek ama daha serbest kalması gerekiyorsa Flexible
• Sadece araya boşluk koymak istiyorsanız Spacer

Pratik Örnek: Form Satırı

Row(
  children: [
    const Icon(Icons.person),
    const SizedBox(width: 12),
    Expanded(
      child: TextField(
        decoration: const InputDecoration(
          hintText: 'Adınızı girin',
        ),
      ),
    ),
  ],
)

Burada Expanded doğru seçimdir çünkü input alanı kalan tüm genişliği kullanmalıdır.

Pratik Örnek: Buton Grubu

Row(
  children: [
    ElevatedButton(onPressed: () {}, child: const Text('Cancel')),
    const Spacer(),
    ElevatedButton(onPressed: () {}, child: const Text('Save')),
  ],
)

Bu yapı, butonları iki uca yerleştirmek için basit ve temiz bir çözümdür.

Sık Yapılan Hatalar

• Expanded'ı gereksiz yere kullanmak
• Flexible ile Expanded'ı aynı şey sanmak
• Spacer'ı içerik taşıyan widget gibi düşünmek
• Flex olmayan parent içinde bu widget'ları kullanmaya çalışmak

Sık Sorulan Sorular

Expanded ve Flexible arasındaki en önemli fark nedir?

Expanded alanı tam doldurur, Flexible ise daha esnek davranır.

Spacer yerine Expanded kullanabilir miyim?

Bazı durumlarda evet, ama Spacer sadece boşluk oluşturmak için daha temizdir.

Hangi widget overflow hatalarını azaltır?

Doğru senaryoda Expanded ve Flexible taşmayı azaltabilir, çünkü alanı kontrollü şekilde dağıtır.

Özet

Expanded, Flexible ve Spacer arasındaki farkı bilmek, Flutter layout yapısını anlamanın temel parçalarından biridir. Bu üçlü doğru kullanıldığında hem taşma hataları azalır hem de daha temiz ve profesyonel bir arayüz elde edilir.