Row dan Column: Menyusun Widget

Dua widget penyusun utama

Hampir semua layout Flutter dibangun dari dua widget ini. Row menyusun anak-anaknya secara horizontal (kiri ke kanan), Column secara vertikal (atas ke bawah). Keduanya menerima daftar children.

Column(
  children: [
    const Text('Nama produk'),
    const Text('Rp25.000'),
    Row(
      children: [
        ElevatedButton(onPressed: () {}, child: const Text('Kurang')),
        const SizedBox(width: 8),
        ElevatedButton(onPressed: () {}, child: const Text('Tambah')),
      ],
    ),
  ],
)

Perhatikan SizedBox(width: 8) sebagai pemberi jarak. Ini pola paling umum memberi spasi antar widget sebaris.

MainAxis dan CrossAxis

Setiap Row/Column punya dua sumbu. Pada Column, main axis adalah vertikal dan cross axis horizontal. Pada Row sebaliknya.

• mainAxisAlignment: mengatur posisi di sumbu utama. Pilihan populer: start, center, end, spaceBetween, spaceAround, spaceEvenly.
• crossAxisAlignment: mengatur posisi di sumbu silang, misalnya CrossAxisAlignment.start agar isi Column rata kiri.

const Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('Total'),
    Text('Rp75.000', style: TextStyle(fontWeight: FontWeight.bold)),
  ],
)

Contoh di atas adalah pola struk kasir klasik: label di kiri, nominal di kanan.

mainAxisSize

Secara default Row/Column mengambil ruang maksimal di sumbu utamanya (MainAxisSize.max). Kadang kamu ingin ia hanya sebesar isinya, misalnya tombol di dalam dialog. Ubah ke MainAxisSize.min:

const Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Hapus produk ini?'),
    Text('Tindakan ini tidak bisa dibatalkan.'),
  ],
)

Nesting: kombinasi keduanya

Layout kompleks dibuat dengan menyarangkan Row di dalam Column dan sebaliknya. Kartu produk biasanya Column berisi gambar, lalu Row berisi nama dan harga, lalu Row berisi tombol. Kuncinya adalah memecah layout menjadi baris dan kolom kecil yang mudah dipikirkan satu per satu.

Catatan teknis: Error layout paling umum di pemula adalah "RenderFlex overflowed", garis kuning-hitam di tepi layar. Artinya total lebar anak Row (atau tinggi anak Column) melebihi ruang yang tersedia. Solusinya bukan mengecilkan font secara membabi buta, tapi membungkus anak yang fleksibel dengan Expanded atau Flexible, atau membungkus Column dengan SingleChildScrollView kalau konten memang boleh di-scroll. Modul Expanded dan Flexible membahas ini detail.