Layout: Row & Column

Menyusun widget secara vertikal dengan Column dan horizontal dengan Row, serta mengatur sebarannya.

Part 9 dari 23 ± 40 menit Gratis

Masalahnya: satu widget hanya punya satu child

Center, Container, dan banyak widget lain hanya menerima satu anak (child). Bagaimana kalau ingin menaruh beberapa widget sekaligus? Gunakan widget susunan: Column dan Row. Keduanya menerima daftar anak lewat children.

Column: atas ke bawah

Column(
  children: [
    Icon(Icons.flutter_dash, size: 64),
    Text('KelasIT'),
    Text('Belajar Flutter'),
  ],
)

Row: kiri ke kanan

Row(
  children: [
    Icon(Icons.home),
    Icon(Icons.search),
    Icon(Icons.person),
  ],
)

Dua sumbu: utama dan silang

Setiap Row/Column punya dua arah:

	Sumbu utama (main axis)	Sumbu silang (cross axis)
Column	vertikal ↓	horizontal →
Row	horizontal →	vertikal ↓

mainAxisAlignment mengatur sebaran sepanjang sumbu utama: start, center, end, spaceBetween (sisa ruang di antara), spaceEvenly (ruang dibagi rata).
crossAxisAlignment mengatur posisi pada sumbu silang: start, center, end.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [Icon(Icons.home), Icon(Icons.search), Icon(Icons.person)],
)

SizedBox: jarak dan ukuran

SizedBox(height: 12) di antara dua widget membuat jarak vertikal 12; SizedBox(width: 12) membuat jarak horizontal. Dengan width/height dan child, ia juga bisa memberi ukuran tertentu.

Tip: Row yang berada di dalam Column hanya selebar isinya sendiri, kecuali kamu memberinya lebar. Karena itu efek spaceEvenly baru terlihat bila Row dibungkus SizedBox(width: ...) seperti pada latihan di bawah.