Seni Menyusun Layout: Merapikan Teks, Tombol, dan Gambar dengan Row & Column

Ringkasan

Praktik langsung menata posisi elemen agar responsif di berbagai ukuran layar HP.

Mengapa Layout Sangat Penting di Flutter?

Saat membuat aplikasi, kita tidak bisa hanya meletakkan teks dan tombol begitu saja tanpa aturan. Jika tidak diatur, elemen-elemen tersebut bisa saling bertumpuk atau keluar dari batas layar (overflow).

Di Flutter, seni menyusun layout berpusat pada dua widget dasar yang paling sering digunakan:

Row: Menyusun elemen secara horizontal (dari kiri ke kanan).
Column: Menyusun elemen secara vertikal (dari atas ke bawah).

1. Mengenal Column (Susunan ke Bawah)

Gunakan Column ketika Anda ingin menumpuk elemen secara vertikal, seperti menyusun judul di atas, sub-judul di tengah, dan tombol di bagian bawah.

Properti Penting:
- mainAxisAlignment: Mengatur posisi elemen secara vertikal (utama). Contoh: MainAxisAlignment.center, MainAxisAlignment.spaceBetween.
- crossAxisAlignment: Mengatur posisi elemen secara horizontal (silang). Contoh: CrossAxisAlignment.start, CrossAxisAlignment.center.
Contoh Kode Column:

Dart
 
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text(
      'Judul Artikel',
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    SizedBox(height: 8), // Memberi jarak antar elemen
    Text('Ini adalah ringkasan singkat dari artikel tersebut.'),
  ],
)

2. Mengenal Row (Susunan ke Samping)

Gunakan Row ketika Anda ingin mensejajarkan elemen secara horizontal, misalnya ikon di sebelah teks, atau beberapa tombol yang berjajar ke samping.

Properti Penting:
- mainAxisAlignment: Mengatur posisi elemen secara horizontal (utama).
- crossAxisAlignment: Mengatur posisi elemen secara vertikal (silang).
Contoh Kode Row:

Dart
 
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const [
    Icon(Icons.star, color: Colors.amber),
    Text('4.8 Bintang'),
    Text('(120 Ulasan)'),
  ],
)

3. Solusi Masalah Layout: Expanded & Flexible

Seringkali, saat kita memasukkan teks yang sangat panjang ke dalam sebuah Row, Flutter akan memunculkan garis peringatan berwarna kuning-hitam (overflow error). Hal ini terjadi karena Row mencoba memuat elemen melebihi lebar layar HP.

Untuk mengatasinya, kita membungkus widget anak di dalam Row dengan Expanded:

Dart
 
Row(
  children: [
    const Icon(Icons.info),
    const SizedBox(width: 10),
    Expanded(
      child: const Text(
        'Ini adalah teks yang sangat panjang dan otomatis menyesuaikan sisa ruang layar tanpa menyebabkan error overflow.',
      ),
    ),
  ],
)

4. Studi Kasus Mini: Kartu Profil Sederhana

Mari gabungkan Row, Column, dan Image untuk membuat tampilan kartu profil yang rapi:

Dart
 
Card(
  margin: const EdgeInsets.all(16),
  child: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Row(
      children: [
        // Gambar profil tiruan menggunakan CircleAvatar
        const CircleAvatar(
          radius: 30,
          backgroundColor: Colors.blue,
          child: Text('A', style: TextStyle(fontSize: 24, color: Colors.white)),
        ),
        const SizedBox(width: 16),
        // Bagian Teks disusun secara vertikal (Column)
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: const [
              Text(
                'Ahmad Developer',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 4),
              Text(
                'Flutter Enthusiast & Beginner',
                style: TextStyle(color: Colors.grey),
              ),
            ],
          ),
        ),
        // Tombol aksi di sebelah kanan
        IconButton(
          icon: const Icon(Icons.arrow_forward_ios),
          onPressed: () {},
        ),
      ],
    ),
  ),
)

Tips Menyusun Layout

Gunakan SizedBox(height: ...) atau SizedBox(width: ...) untuk memberikan jarak yang konsisten antar komponen di dalam Column atau Row.

Jangan ragu mengkombinasikan

Seni Menyusun Layout: Merapikan Teks, Tombol, dan Gambar dengan Row & Column