Boşluk stratejisi

Padding ve margin arasındaki seçimi neye göre yapacağını öğrenirsin.

Ne zaman padding, ne zaman margin?

padding ve margin arasındaki seçim, boşluğun nereye ait olduğuna bağlıdır. Boşluk, widget'ın kendi görsel alanının parçasıysa (örneğin arka plan rengi ile child arası) padding kullanılır. Boşluk, widget ile komşu widget'lar arasındaysa (widget'lar arası mesafe) margin kullanılır.

// Kartın içindeki metnin kenara uzaklığı -> padding
Container(
  color: Colors.blue,
  padding: EdgeInsets.all(16),
  child: Text('İç boşluk'),
)

// İki kart arasındaki mesafe -> margin
Container(
  margin: EdgeInsets.only(bottom: 12),
  child: Text('Kart 1'),
)
Container(
  child: Text('Kart 2'),
)

Düzen (layout) oluşturma

İyi bir layout, padding ve margin'in bilinçli kullanımıyla oluşur. Liste öğeleri arasında mesafe için margin, kart içindeki metin ile kenar arası için padding kullanılır. Column veya Row içindeki çocuklar arasında eşit mesafe için mainAxisAlignment: spaceBetween de bir seçenektir; bu, her çocuca tek tek margin vermeye alternatiftir.

Column(
  children: [
    Container(
      margin: EdgeInsets.only(bottom: 8),
      child: Text('Öğe 1'),
    ),
    Container(
      margin: EdgeInsets.only(bottom: 8),
      child: Text('Öğe 2'),
    ),
    // veya mainAxisAlignment: spaceBetween
  ],
)

Uygulama Strateji bilgisini yazdır

main içinde iki satırı print ile yazdır: ic bosluk padding ve dis bosluk margin.

Örnek çözümü göster

void main() {
  print('ic bosluk padding');
  print('dis bosluk margin');
}

Kendini test et

Bir widget'ın arka planı ile metni arasına boşluk koymak için hangi kullanılır?
- padding
- alignment
- decoration
- margin
Cevabı göster

padding — Arka plan ile metin arası boşluk widget'ın kendi alanına ait olduğu için padding kullanılır.

Belirli kenara boşluk

Container(
  margin: EdgeInsets.____(bottom: 12),
  child: Text('Kart'),
)

Cevabı göster

Container(
  margin: EdgeInsets.only(bottom: 12),
  child: Text('Kart'),
)

Boşluk stratejisi kavramları

iç boşluk

Arka plan ile child arası
dış boşluk

Komşu widget'lar arası
layout

Widget'ların düzenlenmesi
mainAxisAlignment.spaceBetween

Çocuklar arası otomatik mesafe

Sıradaki ders: Özet - Padding ve margin

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler