Ahmet Balaman LogoAhmet Balaman

Flutter: Padding ile İç Boşluk Yönetimi

personAhmet Balaman
calendar_today
FlutterPaddingEdgeInsetsLayoutUI

Padding, widget'ların etrafında iç boşluk (padding) oluşturmak için kullanılan temel bir widget'tır. Tasarım dünyasından aşinaysanız, padding kavramını biliyorsunuzdur.

Padding Nedir?

Padding, bir widget'ın içeriği ile dış sınırı arasında boşluk bırakır. Margin'in tersine, padding widget'ın içinde boşluk oluşturur.

Temel Kullanım

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Etrafımda 16 piksel boşluk var'),
)

EdgeInsets Türleri

Flutter'da padding değerleri EdgeInsets sınıfı ile belirlenir.

EdgeInsets.all()

Tüm kenarlardan eşit boşluk:

Padding(
  padding: EdgeInsets.all(16),
  child: Text('Her yönden 16 piksel'),
)

EdgeInsets.symmetric()

Yatay ve dikey eksenlerde simetrik boşluk:

Padding(
  padding: EdgeInsets.symmetric(
    horizontal: 16, // Sol ve sağdan 16 piksel
    vertical: 8,    // Üst ve alttan 8 piksel
  ),
  child: Text('Simetrik boşluk'),
)

EdgeInsets.only()

Belirli kenarlardan boşluk:

Padding(
  padding: EdgeInsets.only(
    left: 16,
    top: 8,
    right: 16,
    bottom: 8,
  ),
  child: Text('Özel boşluk'),
)

İstediğiniz kenarları belirtebilirsiniz:

// Sadece sol ve üstten
Padding(
  padding: EdgeInsets.only(left: 16, top: 8),
  child: Text('Sol ve üstten boşluk'),
)

EdgeInsets.fromLTRB()

Sol, üst, sağ, alt sırasıyla:

Padding(
  padding: EdgeInsets.fromLTRB(16, 8, 16, 12),
  // Left: 16, Top: 8, Right: 16, Bottom: 12
  child: Text('LTRB formatında'),
)

EdgeInsets.zero

Hiç boşluk yok (varsayılan):

Padding(
  padding: EdgeInsets.zero,
  child: Text('Boşluk yok'),
)

Pratik Kullanım Örnekleri

Örnek 1: 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('İçerik metni buraya gelir...'),
      ],
    ),
  ),
)

Örnek 2: Liste Öğesi

Container(
  decoration: BoxDecoration(
    border: Border(bottom: BorderSide(color: Colors.grey.shade300)),
  ),
  child: Padding(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    child: Row(
      children: [
        Icon(Icons.person),
        SizedBox(width: 12),
        Expanded(child: Text('Kullanıcı Adı')),
        Icon(Icons.arrow_forward_ios, size: 16),
      ],
    ),
  ),
)

Örnek 3: Buton İç Boşluğu

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  ),
  child: Text('Geniş Buton'),
)

Örnek 4: Sayfa İçeriği

Scaffold(
  appBar: AppBar(title: Text('Sayfa')),
  body: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Başlık', style: TextStyle(fontSize: 24)),
        SizedBox(height: 8),
        Text('İçerik buraya gelir...'),
      ],
    ),
  ),
)

İç İçe Padding

Padding'leri iç içe kullanabilirsiniz:

Container(
  color: Colors.blue.shade100,
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Container(
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Text('İç içe padding'),
      ),
    ),
  ),
)

Dış padding 20, iç padding 16 piksel olur.

Container Padding vs Padding Widget

Container'ın padding özelliği ile Padding widget'ı aynı sonucu verir:

Container ile

Container(
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Text('Container padding'),
)

Padding Widget ile

Container(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Padding widget'),
  ),
)

Hangisi?

  • Zaten Container kullanıyorsanız: padding özelliği
  • Sadece padding gerekiyorsa: Padding widget
  • Performans farkı yok, tercihe bağlı

Responsive Padding

Ekran boyutuna göre dinamik padding:

LayoutBuilder(
  builder: (context, constraints) {
    final isSmallScreen = constraints.maxWidth < 600;
    
    return Padding(
      padding: EdgeInsets.all(isSmallScreen ? 8 : 24),
      child: Text('Responsive padding'),
    );
  },
)

veya MediaQuery ile:

Builder(
  builder: (context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final padding = screenWidth * 0.05; // Ekranın %5'i
    
    return Padding(
      padding: EdgeInsets.all(padding),
      child: Text('Oransal padding'),
    );
  },
)

Standart Padding Değerleri

Material Design önerileri:

EdgeInsets.all(4)   // Çok dar
EdgeInsets.all(8)   // Dar
EdgeInsets.all(12)  // Orta-dar
EdgeInsets.all(16)  // Standart (en yaygın)
EdgeInsets.all(24)  // Geniş
EdgeInsets.all(32)  // Çok geniş

Yatay ve dikey için:

EdgeInsets.symmetric(horizontal: 16, vertical: 8)  // Liste öğeleri
EdgeInsets.symmetric(horizontal: 24, vertical: 16) // Kartlar
EdgeInsets.symmetric(horizontal: 16, vertical: 12) // Butonlar

Padding vs Margin

Padding (İç Boşluk)

Container(
  color: Colors.blue,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Mavi arka planlı metin'),
  ),
)

Mavi arka plan, text'in etrafında 16 piksel içerde kalır.

Margin (Dış Boşluk)

Container(
  margin: EdgeInsets.all(16),
  color: Colors.blue,
  child: Text('Mavi arka planlı metin'),
)

Mavi arka plan, dış boşluktan sonra başlar.

Görsel Fark:

  • Padding: Arka plan rengini etkiler, içeride boşluk
  • Margin: Arka plan rengini etkilemez, dışarıda boşluk

Safe Area ile Birlikte Kullanım

Ekran kenarlarından güvenli mesafe için SafeArea ile birlikte:

Scaffold(
  body: SafeArea(
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          Text('Güvenli alanda'),
          Text('içerik'),
        ],
      ),
    ),
  ),
)

ListView ile Padding

ListView'da padding iki şekilde kullanılabilir:

ListView padding Özelliği

ListView(
  padding: EdgeInsets.all(16),
  children: [
    Text('Öğe 1'),
    Text('Öğe 2'),
    Text('Öğe 3'),
  ],
)

Her Öğeye Ayrı Padding

ListView(
  children: [
    Padding(
      padding: EdgeInsets.all(8),
      child: Text('Öğe 1'),
    ),
    Padding(
      padding: EdgeInsets.all(8),
      child: Text('Öğe 2'),
    ),
  ],
)

Negatif Padding?

EdgeInsets negatif değer alamaz. Negatif boşluk için Transform veya OverflowBox kullanın:

Transform.translate(
  offset: Offset(-10, -10), // Negatif kaydırma
  child: Text('Kaydırılmış'),
)

Directionality ile Padding

RTL (sağdan sola) dillerde left/right yerine start/end kullanın:

// LTR ve RTL için uygun
Padding(
  padding: EdgeInsetsDirectional.only(
    start: 16,  // LTR'de sol, RTL'de sağ
    end: 8,     // LTR'de sağ, RTL'de sol
  ),
  child: Text('Yönden bağımsız'),
)

Performans İpuçları

  1. Const kullanın: EdgeInsets değerleri değişmiyorsa const yapın:
Padding(
  padding: const EdgeInsets.all(16), // const
  child: Text('Performanslı'),
)

  1. Gereksiz padding'den kaçının: Çok fazla iç içe padding widget'ı performansı düşürebilir.

  2. Container padding'i tercih edin: Zaten Container kullanıyorsanız, ayrı Padding widget'ı eklemeyin.

Özet

Padding:

  • Widget'ların içinde boşluk oluşturur
  • EdgeInsets ile değerler belirlenir
  • all(), symmetric(), only(), fromLTRB() metotları vardır
  • Margin'in tersine içerde boşluk yaratır
  • Container'ın padding özelliği ile aynı işi yapar
  • Responsive ve standart değerler kullanılmalıdır

En Yaygın Kullanımlar:

  • EdgeInsets.all(16): Genel amaçlı
  • EdgeInsets.symmetric(horizontal: 16, vertical: 8): Liste öğeleri
  • EdgeInsets.only(...): Özel durumlar

Padding, her Flutter uygulamasında en çok kullanılan widget'lardan biridir ve iyi tasarımın temelidir.

arrow_backTüm Yazılar