Row
- Flutter kursu
- Başlangıç
- Ders 32/99
- 4 dk
Row ile widget'ları yatay dizmeyi öğrenirsin.
Row
Row, birden çok widget'ı yatay olarak yan yana dizen widget'tır. Column gibi children parametresi bir widget listesi alır. Row'un ana ekseni yataydır; mainAxisAlignment yatay dağılımı, crossAxisAlignment dikey hizalamayı kontrol eder.
Row(
children: [
Text('Sol'),
Text('Orta'),
Text('Sağ'),
],
)Row parametreleri
Row'un parametreleri Column'unkilere paraleldir: children, mainAxisAlignment, crossAxisAlignment ve mainAxisSize. Ancak Row'da ana eksen yatay olduğu için mainAxisAlignment yatay dağılımı, crossAxisAlignment dikey hizalamayı kontrol eder. Row, tüm genişliği kaplar; MainAxisSize.min ile içeriğe göre daraltılır.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.add),
Text('Ekle'),
Icon(Icons.close),
],
)Uygulama Row bilgisini yazdır
main içinde iki satırı print ile yazdır: row yatay ve mainAxis dagilim.
Başlangıç kodu
void main() {
// iki satır yazdır:
// row yatay
// mainAxis dagilim
}Örnek çözüm
void main() {
print('row yatay');
print('mainAxis dagilim');
}Beklenen çıktı
row yatay mainAxis dagilim
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Row widget'ı widget'ları hangi yönde dizer?
- Çakışarak üst üste
- Dikey olarak alt alta
- Yatay olarak yan yana Doğru cevap
- Rastgele sırada
Açıklama: Row widget'ları yatay olarak yan yana dizer; Column dikey olarak alt alta dizer.
2 Row döndür
Widget build(BuildContext context) {
return ____(
children: [Text('a'), Text('b')],
);
}Widget build(BuildContext context) {
return Row(
children: [Text('a'), Text('b')],
);
}Açıklama: Row widget'ı çocukları yatay olarak dizer.
3 Row kavramları
| Kavram | Anlamı |
|---|---|
Row |
Widget'ları yatay dizen widget |
yatay ana eksen |
Row'un ana eksen yönü |
dikey çapraz eksen |
Row'un çapraz eksen yönü |
MainAxisSize.min |
Row'u içeriğe göre daraltır |