Container
- Flutter kursu
- Başlangıç
- Ders 28/99
- 4 dk
Container ile kutu şeklinde alan oluşturmayı öğrenirsin.
Container
Container, içine başka widget'lar yerleştirilebilen kutu şeklinde bir widget'tır. padding ile iç kenar boşluğu, margin ile dış kenar boşluğu, decoration ile görsel süslemeler eklersin. Container, tek child alan bir widget'tır.
Container(
padding: EdgeInsets.all(8.0),
margin: EdgeInsets.all(16.0),
child: Text('Kutu içinde'),
)padding ve margin farkı
padding, Container'ın kenarı ile child arasındaki boşluktur; margin ise Container ile dış dünyadaki diğer widget'lar arasındaki boşluktur. EdgeInsets.all dört kenara da aynı değeri, EdgeInsets.symmetric yatay ve dikey için farklı değerleri, EdgeInsets.only belirli kenarlara değer verir.
Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 8,
),
margin: EdgeInsets.only(left: 20),
child: Text('Boşluklu'),
)Uygulama Container bilgisini yazdır
main içinde iki satırı print ile yazdır: container kutu ve padding ic.
Başlangıç kodu
void main() {
// iki satır yazdır:
// container kutu
// padding ic
}Örnek çözüm
void main() {
print('container kutu');
print('padding ic');
}Beklenen çıktı
container kutu padding ic
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Container widget'ı ne için kullanılır?
- Liste göstermek için
- Ses kaydetmek için
- İçine widget yerleştirilen kutu için Doğru cevap
- Sayfa yönlendirmek için
Açıklama: Container, içine child widget yerleştirilebilen ve padding/margin/decoration ile biçimlendirilen kutudur.
2 İç kenar boşluğu
Container(
____: EdgeInsets.all(8.0),
child: Text('Dolu'),
)Container(
padding: EdgeInsets.all(8.0),
child: Text('Dolu'),
)Açıklama: padding parametresi Container kenarı ile child arasındaki boşluğu belirler.
3 Container kavramları
| Kavram | Anlamı |
|---|---|
Container |
Kutu şeklinde alan |
padding |
İç kenar boşluğu |
margin |
Dış kenar boşluğu |
decoration |
Görsel süsleme |