Boşluk stratejisi
- Flutter kursu
- Başlangıç
- Ders 39/99
- 4 dk
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.
Başlangıç kodu
void main() {
// iki satır yazdır:
// ic bosluk padding
// dis bosluk margin
}Örnek çözüm
void main() {
print('ic bosluk padding');
print('dis bosluk margin');
}Beklenen çıktı
ic bosluk padding dis bosluk margin
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir widget'ın arka planı ile metni arasına boşluk koymak için hangi kullanılır?
- padding Doğru cevap
- alignment
- decoration
- margin
Açıklama: Arka plan ile metin arası boşluk widget'ın kendi alanına ait olduğu için padding kullanılır.
2 Belirli kenara boşluk
Container(
margin: EdgeInsets.____(bottom: 12),
child: Text('Kart'),
)Container(
margin: EdgeInsets.only(bottom: 12),
child: Text('Kart'),
)Açıklama: only kurucusu yalnızca belirtilen kenarlara değer verir.
3 Boşluk stratejisi kavramları
| Kavram | Anlamı |
|---|---|
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 |