Özet - Column ve Row
- Flutter kursu
- Başlangıç
- Ders 35/99
- 4 dk
Column, Row ve hizalamaları birleştirerek profil satırı yaparsın.
Column ve Row özeti
Column ve Row, birden çok widget'ı sırasıyla dikey ve yatay dizen iki temel düzendir. mainAxisAlignment ana eksende dağılımı, crossAxisAlignment çapraz eksende hizalamayı belirler. Column içinde Row veya Row içinde Column kullanarak iki boyutlu düzenler kurarsın. Bu örnekte bir profil satırı yapabilirsin.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Ada Yılmaz', style: TextStyle(fontWeight: FontWeight.bold)),
Text('Flutter geliştirici'),
],
),
Icon(Icons.person),
],
)Uygulama Profil satırı yap ve çalıştır
Önce print('profil hazir') yazdır, sonra runApp(MaterialApp(home: Row(...))) çağrısı yap. Row'un mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center ve children: [Text('Ada'), Icon(Icons.person)] olsun.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// 'profil hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir Row olsun
}
// Row: ana eksen ve çapraz eksen hizalaması içersin
// children: Text ve Icon olsunÖrnek çözüm
import 'package:flutter/material.dart';
void main() {
print('profil hazir');
runApp(MaterialApp(home: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [Text('Ada'), Icon(Icons.person)],
)));
}Beklenen çıktı
profil hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir profil satırı (avatar solda, isim sağda) için hangi widget kullanılır?
- Column
- Row Doğru cevap
- Stack
- Container
Açıklama: Profil satırında avatar ve isim yan yana dizileceği için Row kullanılır.
2 Yatay dağılımı ayarla
Row(
____: MainAxisAlignment.spaceBetween,
children: [Text('A'), Text('B')],
)Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [Text('A'), Text('B')],
)Açıklama: mainAxisAlignment parametresi Row'da yatay dağılımı belirler.
3 Column ve Row birleşimi
| Kavram | Anlamı |
|---|---|
Dikey düzen |
Column ile |
Yatay düzen |
Row ile |
Ana eksen dağılımı |
mainAxisAlignment ile |
Çapraz eksen hizalaması |
crossAxisAlignment ile |