Row

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.

Örnek çözümü göster

void main() {
  print('row yatay');
  print('mainAxis dagilim');
}

Kendini test et

Row widget'ı widget'ları hangi yönde dizer?
- Çakışarak üst üste
- Dikey olarak alt alta
- Yatay olarak yan yana
- Rastgele sırada
Cevabı göster

Yatay olarak yan yana — Row widget'ları yatay olarak yan yana dizer; Column dikey olarak alt alta dizer.

Row döndür

Widget build(BuildContext context) {
  return ____(
    children: [Text('a'), Text('b')],
  );
}

Cevabı göster

Widget build(BuildContext context) {
  return Row(
    children: [Text('a'), Text('b')],
  );
}

Row kavramları

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

Sıradaki ders: MainAxisAlignment

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler