Column
- Flutter kursu
- Başlangıç
- Ders 31/99
- 4 dk
Column ile widget'ları dikey dizmeyi öğrenirsin.
Column
Column, birden çok widget'ı dikey olarak alt alta dizen widget'tır. children parametresi bir widget listesi alır. Column'un ana ekseni dikeydir; mainAxisAlignment dikey dağılımı, crossAxisAlignment yatay hizalamayı kontrol eder.
Column(
children: [
Text('Birinci'),
Text('İkinci'),
Text('Üçüncü'),
],
)Column parametreleri
Column'un en önemli parametreleri: children (dikey dizilecek widget listesi), mainAxisAlignment (dikey dağılım), crossAxisAlignment (yatay hizalama) ve mainAxisSize (ana eksen boyutu). Column varsayılan olarak tüm dikey alanı kaplar; mainAxisSize: MainAxisSize.min ile içeriğe göre daraltılır.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text('Kısa'),
Text('Sütun'),
],
)Uygulama Column bilgisini yazdır
main içinde iki satırı print ile yazdır: column dikey ve children liste.
Başlangıç kodu
void main() {
// iki satır yazdır:
// column dikey
// children liste
}Örnek çözüm
void main() {
print('column dikey');
print('children liste');
}Beklenen çıktı
column dikey children liste
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Column widget'ı widget'ları hangi yönde dizer?
- Yatay olarak yan yana
- Dikey olarak alt alta Doğru cevap
- Rastgele sırada
- Çakışarak üst üste
Açıklama: Column widget'ları dikey olarak alt alta dizer; Row yatay olarak yan yana dizer.
2 Çocukları listele
Column(
____: [
Text('Bir'),
Text('İki'),
],
)Column(
children: [
Text('Bir'),
Text('İki'),
],
)Açıklama: children parametresi Column'a dizilecek widget listesini verir.
3 Column kavramları
| Kavram | Anlamı |
|---|---|
Column |
Widget'ları dikey dizen widget |
children |
Dikey dizilecek widget listesi |
mainAxisAlignment |
Dikey dağılım |
crossAxisAlignment |
Yatay hizalama |