MainAxisAlignment
- Flutter kursu
- Başlangıç
- Ders 33/99
- 4 dk
MainAxisAlignment ile ana eksen hizalamayı öğrenirsin.
MainAxisAlignment
MainAxisAlignment, Column ve Row'da ana eksen boyunca çocukların nasıl dağılacağını belirler. Column'da ana eksen dikey, Row'da yataydır. Yaygın değerler: center (ortala), spaceBetween (aralarında eşit boşluk, kenar boşluğu yok), spaceEvenly (kenarlar dahil eşit boşluk), start (başa yasla), end (sona yasla).
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Ortada'),
],
)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Sol'),
Text('Sağ'),
],
)spaceBetween ve spaceEvenly farkı
spaceBetween, ilk ve son çocukları kenarlara yapıştırır, aradakilere eşit boşluk verir. spaceEvenly ise kenar boşlukları dahil tüm boşlukları eşit dağıtır. center tüm çocukları tek blok halinde ortalar. start ve end çocukları sırasıyla başa veya sona yaslar.
// spaceBetween: A --- B --- C (kenar boşluğu yok)
// spaceEvenly: --- A --- B --- C --- (kenar dahil eşit)
// center: --- ABC --- (blok halinde orta)
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [Text('A'), Text('B'), Text('C')],
)Uygulama MainAxisAlignment bilgisini yazdır
main içinde iki satırı print ile yazdır: mainAxis eksen ve spaceBetween bosluk.
Başlangıç kodu
void main() {
// iki satır yazdır:
// mainAxis eksen
// spaceBetween bosluk
}Örnek çözüm
void main() {
print('mainAxis eksen');
print('spaceBetween bosluk');
}Beklenen çıktı
mainAxis eksen spaceBetween bosluk
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 MainAxisAlignment.spaceBetween ne yapar?
- Çocukları kenar boşluğu bırakmadan eşit aralıklı dizer Doğru cevap
- Çocukları sona yaslar
- Çocukları başa yaslar
- Çocukları ortalar
Açıklama: spaceBetween, ilk ve son çocukları kenarlara yapıştırır ve aradakilere eşit boşluk verir.
2 Çocukları ortala
Column(
mainAxisAlignment: MainAxisAlignment.____,
children: [Text('X')],
)Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [Text('X')],
)Açıklama: center değeri çocukları ana eksende ortalar.
3 MainAxisAlignment kavramları
| Kavram | Anlamı |
|---|---|
MainAxisAlignment |
Ana eksen dağılımı |
center |
Çocukları ortalar |
spaceBetween |
Kenar boşluksuz eşit aralık |
spaceEvenly |
Kenar dahil eşit aralık |