Özet - Column ve Row

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.

Örnek çözümü göster

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)],
  )));
}

Kendini test et

Bir profil satırı (avatar solda, isim sağda) için hangi widget kullanılır?
- Column
- Row
- Stack
- Container
Cevabı göster

Row — Profil satırında avatar ve isim yan yana dizileceği için Row kullanılır.

Yatay dağılımı ayarla

Row(
  ____: MainAxisAlignment.spaceBetween,
  children: [Text('A'), Text('B')],
)

Cevabı göster

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [Text('A'), Text('B')],
)

Column ve Row birleşimi

Dikey düzen

Column ile
Yatay düzen

Row ile
Ana eksen dağılımı

mainAxisAlignment ile
Çapraz eksen hizalaması

crossAxisAlignment ile

Sıradaki ders: Padding widget'ı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler