Ahmet Balaman LogoAhmet Balaman

Flutter: SizedBox ile Boyutlandırma ve Boşluk

personAhmet Balaman
calendar_today
FlutterSizedBoxLayoutSpacingWidget

SizedBox, Flutter'da widget'lara sabit boyut vermek veya widget'lar arasında boşluk oluşturmak için kullanılan basit ama çok işlevsel bir widget'tır.

SizedBox Nedir?

SizedBox, sabit genişlik ve/veya yükseklik belirleyebileceğiniz bir kutu oluşturur. İki ana kullanım amacı vardır:

  1. Widget'lara sabit boyut vermek
  2. Widget'lar arasında boşluk oluşturmak

Temel Kullanım

Sabit Boyut Verme

SizedBox(
  width: 200,
  height: 100,
  child: Container(
    color: Colors.blue,
    child: Center(child: Text('200x100 kutu')),
  ),
)

Container'ı SizedBox içine alarak boyutunu sınırlamış olduk.

Sadece Genişlik Belirleme

SizedBox(
  width: 150,
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Sabit genişlikte buton'),
  ),
)

Sadece Yükseklik Belirleme

SizedBox(
  height: 80,
  child: Image.network('https://example.com/logo.png'),
)

Boşluk Oluşturma

SizedBox'un en yaygın kullanımlarından biri, widget'lar arasında görünmeyen boşluk oluşturmaktır.

Dikey Boşluk (Column içinde)

Column(
  children: [
    Text('Birinci metin'),
    SizedBox(height: 16), // 16 piksel dikey boşluk
    Text('İkinci metin'),
    SizedBox(height: 24), // 24 piksel dikey boşluk
    ElevatedButton(
      onPressed: () {},
      child: Text('Buton'),
    ),
  ],
)

Yatay Boşluk (Row içinde)

Row(
  children: [
    Icon(Icons.star),
    SizedBox(width: 8), // 8 piksel yatay boşluk
    Text('Yıldızlı'),
    SizedBox(width: 16), // 16 piksel yatay boşluk
    Icon(Icons.favorite),
  ],
)

Container Yeniden Boyutlandırma

Mevcut bir Container'ı yeniden boyutlandırmak için SizedBox kullanabilirsiniz:

// Orijinal Container
Container(
  width: 300,
  height: 200,
  color: Colors.blue,
  child: Center(child: Text('Büyük kutu')),
)

// SizedBox ile yeniden boyutlandırılmış
SizedBox(
  width: 150,
  height: 100,
  child: Container(
    color: Colors.blue,
    child: Center(child: Text('Küçük kutu')),
  ),
)

Container SizedBox tarafından belirlenen boyutlara sınırlanır.

SizedBox.shrink()

İçeriği olmayan, sıfır boyutunda bir widget oluşturur. Koşullu durumlarda hiçbir şey göstermemek için kullanışlıdır:

Column(
  children: [
    Text('Her zaman görünür'),
    condition ? Text('Koşullu görünür') : SizedBox.shrink(),
    Text('Her zaman görünür'),
  ],
)

SizedBox.expand()

Mevcut tüm alanı kaplayacak şekilde genişler:

SizedBox.expand(
  child: Container(
    color: Colors.blue,
    child: Center(child: Text('Tüm alan')),
  ),
)

Parent'ın tüm genişlik ve yüksekliğini kaplar.

SizedBox.square()

Kare şeklinde (eşit genişlik ve yükseklik) bir alan oluşturur:

SizedBox.square(
  dimension: 100,
  child: Container(
    color: Colors.red,
    child: Center(child: Text('Kare')),
  ),
)

100x100 piksel kare alan oluşturur.

Pratik Kullanım Örnekleri

Örnek 1: Form Düzeni

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('Kullanıcı Adı', style: TextStyle(fontWeight: FontWeight.bold)),
    SizedBox(height: 8),
    TextField(
      decoration: InputDecoration(border: OutlineInputBorder()),
    ),
    SizedBox(height: 16),
    Text('Şifre', style: TextStyle(fontWeight: FontWeight.bold)),
    SizedBox(height: 8),
    TextField(
      obscureText: true,
      decoration: InputDecoration(border: OutlineInputBorder()),
    ),
    SizedBox(height: 24),
    ElevatedButton(
      onPressed: () {},
      child: Text('Giriş Yap'),
    ),
  ],
)

Örnek 2: Kart Düzeni

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Başlık', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('Alt başlık', style: TextStyle(color: Colors.grey)),
        SizedBox(height: 16),
        Text('İçerik metni burada yer alır...'),
        SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextButton(onPressed: () {}, child: Text('İPTAL')),
            SizedBox(width: 8),
            ElevatedButton(onPressed: () {}, child: Text('TAMAM')),
          ],
        ),
      ],
    ),
  ),
)

Örnek 3: Icon ve Text Kombinasyonu

Row(
  children: [
    SizedBox(
      width: 40,
      height: 40,
      child: Icon(Icons.notifications, color: Colors.blue),
    ),
    SizedBox(width: 12),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Bildirim', style: TextStyle(fontWeight: FontWeight.bold)),
          SizedBox(height: 4),
          Text('Yeni mesajınız var', style: TextStyle(fontSize: 12)),
        ],
      ),
    ),
  ],
)

Örnek 4: Sabit Boyutlu Butonlar

Column(
  children: [
    SizedBox(
      width: double.infinity,
      height: 48,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Tam genişlik buton'),
      ),
    ),
    SizedBox(height: 12),
    SizedBox(
      width: 200,
      height: 48,
      child: OutlinedButton(
        onPressed: () {},
        child: Text('Sabit genişlik buton'),
      ),
    ),
  ],
)

SizedBox vs Container

Container da boyut belirleyebilir, peki fark nedir?

Container

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  padding: EdgeInsets.all(8),
  margin: EdgeInsets.all(8),
  child: Text('Container'),
)
  • Padding, margin, color, decoration gibi özellikleri var
  • Daha fazla özellik = daha fazla işlem yükü

SizedBox

SizedBox(
  width: 100,
  height: 100,
  child: Text('SizedBox'),
)
  • Sadece boyut belirleme yapar
  • Daha hafif ve performanslı
  • Sadece boyut gerektiğinde tercih edilmeli

Kural: Sadece boyut belirleyecekseniz SizedBox, renk/padding/decoration gerekiyorsa Container kullanın.

Boşluk için SizedBox vs Padding

SizedBox (Boşluk için)

Column(
  children: [
    Text('Üst'),
    SizedBox(height: 16),
    Text('Alt'),
  ],
)
  • Widget'lar arası boşluk
  • Görünmez ayraç
  • Daha okunabilir kod

Padding (İç boşluk için)

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Etrafında boşluk'),
)
  • Widget'ın etrafında boşluk
  • İç boşluk (padding)

Responsive Boyutlandırma

MediaQuery ile dinamik boyutlar:

LayoutBuilder(
  builder: (context, constraints) {
    return SizedBox(
      width: constraints.maxWidth * 0.8, // Ekranın %80'i
      height: constraints.maxHeight * 0.5, // Ekranın %50'si
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('Responsive boyut')),
      ),
    );
  },
)

Standart Boşluk Değerleri

Material Design'a göre önerilen boşluk değerleri:

SizedBox(height: 4)   // Çok küçük boşluk
SizedBox(height: 8)   // Küçük boşluk
SizedBox(height: 12)  // Orta-küçük boşluk
SizedBox(height: 16)  // Orta boşluk
SizedBox(height: 24)  // Büyük boşluk
SizedBox(height: 32)  // Çok büyük boşluk
SizedBox(height: 48)  // Bölüm arası boşluk

Özet

SizedBox:

  • Sabit boyut belirleme için kullanılır
  • Widget'lar arası görünmez boşluk oluşturur
  • Container'dan daha hafif ve performanslıdır
  • shrink(), expand(), square() factory constructor'ları vardır
  • Boşluk için en yaygın kullanılan widget'tır

Kullanım önerileri:

  • Boşluk için: SizedBox(height: x) veya SizedBox(width: x)
  • Sabit boyut için: SizedBox(width: x, height: y)
  • Hiçbir şey göstermemek için: SizedBox.shrink()
  • Kare alan için: SizedBox.square(dimension: x)

SizedBox, Flutter'da layout oluştururken en çok kullanacağınız widget'lardan biridir.

arrow_backTüm Yazılar