Özet - Padding ve margin
- Flutter kursu
- Başlangıç
- Ders 40/99
- 4 dk
Padding ve margin'i birleştirerek nefes alan bir kart yaparsın.
Padding ve margin özeti
Padding widget'ı ve Container'ın padding parametresi, child ile kenar arasına iç boşluk koyar. Container'ın margin parametresi, Container ile dış widget'lar arasına dış boşluk koyar. EdgeInsets'in all, only ve symmetric kurucuları boşluk miktarını esnek biçimde tanımlar. Padding ve margin'i birlikte kullanarak, hem içeriği nefes alan hem de komşularından ayrılan kartlar oluşturursun.
Container(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Text('Nefes alan kart'),
)Uygulama Nefes alan kart yap ve çalıştır
Önce print('kart hazir') yazdır, sonra runApp(MaterialApp(home: Container(...))) çağrısı yap. Container'ın margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8), padding: EdgeInsets.all(12), decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(8)) ve child: Text('Nefes alan kart') olsun.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// 'kart hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir Container olsun
}
// Container: dış ve iç boşluk, süsleme içersin
// child: Text olsunÖrnek çözüm
import 'package:flutter/material.dart';
void main() {
print('kart hazir');
runApp(MaterialApp(home: Container(
margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
),
child: Text('Nefes alan kart'),
)));
}Beklenen çıktı
kart hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir kartın hem içeriği nefes alsın hem de komşu kartlardan ayrı dursun istiyorsan ne kullanırsın?
- Hem padding hem margin Doğru cevap
- Yalnızca color
- Yalnızca padding
- Yalnızca margin
Açıklama: İç boşluk için padding, dış boşluk için margin birlikte kullanılarak kart hem nefes alır hem ayrı durur.
2 Boşluk nesnesini tanımla
padding: ____.all(16.0),padding: EdgeInsets.all(16.0),Açıklama: EdgeInsets, padding ve margin değerlerini tanımlayan nesnedir.
3 Padding ve margin birleşimi
| Kavram | Anlamı |
|---|---|
Nefes alan kart |
padding + margin ile |
Dört kenar aynı boşluk |
EdgeInsets.all ile |
Yatay ve dikey ayrı |
EdgeInsets.symmetric ile |
Belirli kenar boşluğu |
EdgeInsets.only ile |