Row, Column, dan Wrap | Flutter Layout

Bismillah.

Ini adalah seri tutorial flutter yang kedua. Setelah sebelumnya kita membuat project flutter hello world yang mencakup pembahasan tentang Stateless Widget, Stateful Widget, dan juga Container Widget. Pada seri kali ini, kita akan membahas tentang layout dasar pada Flutter.

Inti Pembahasan

1. Widgets adalah kelas-kelas yang digunakan untuk merepresentasikan UI.
2. Widgets digunakan baik untuk mendefinisikan layout mau pun komponen UI.
3. Kita bisa menggabungkan widget-widget sederhana untuk membangun sebuah widget yang kompleks.

Jenis-Jenis Layout Pada Flutter

Pada Flutter, terdapat berbagai macam jenis layout.

Layout yang paling mendasar adalah row dan column. Row dan column memungkinkan kita untuk menyusun widget atau komponen-komponen UI, baik secara horizontal mau pun secara vertical.

Test Drive

Kita akan coba langsung secara sederhana bagaimana cara menyusun layout row dan column pada flutter.

1. Buat Project Baru

Buat project flutter baru, baik menggunakan visual studio code atau pun menggunakan android studio.

2. Tambahkan Fungsi buatKotak(warna, ukuran)

Buka file main.dart.

Lalu hapus semua isinya (kecuali fungsi main() dan bagian import).

Kemudian buat fungsi dengan nama buatKotak.

Fungsi ini menerima 2 parameter:

1. Warna
2. Ukuran

Tugas dari fungsi ini adalah membuat sebuah Container, dengan warna dan ukuran sesuai yang kita inginkan.

Widget buatKotak (Color warna, double ukuran) {
  return Container(
    decoration: BoxDecoration(
      color: warna
    ),
    height: ukuran,
    width: ukuran,
    margin: EdgeInsets.all(10),
  );
}

3. Siapkan MaterialApp

Karena kita akan menjalankan aplikasi kita di android, maka kita jadikan MaterialApp sebagai root dari widget kita.

Pada fungsi main(), ubah kodenya menjadi seperti berikut:

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        // nanti kita taruh layout kita di sini
      )
    ),
  ));
}

Pada kode program di atas, kita menggunakan SafeArea. SafeArea adalah widget yang memungkinkan kita untuk meletakkan komponen UI pada area yang aman, alias area yang terlihat oleh user (tidak tertutupi notifikasi bar).

4. Susun Row Layout

Pada widget SafeArea, tambahkan child komponen berupa Row, lalu buat 4 buah kotak dengan memanggil fungsi buatKotak() yang telah kita definisikan sebelumnya.

...
body: SafeArea(
  child: Row(
    children: [
      buatKotak(Colors.greenAccent, 100),
      buatKotak(Colors.orangeAccent[400], 70),
      buatKotak(Colors.greenAccent, 50),
      buatKotak(Colors.orangeAccent[400], 90),
    ],
  ),
)
...

Jalankan aplikasi.

Berikut ini adalah hasil yang akan kita dapat:

5. Susun Column Layout

Jika row layout kita gunakan untuk mengatur komponen UI secara horizontal, maka Column layout adalah kebalikannya; yaitu mengatur komponen-komponen UI secara vertikal.

Bagaimana caranya?

Tinggal ubah saja widget Row menjadi Column.

Dan inilah hasil yang kita dapat:

6. Susun Wrap Layout

Selanjutnya, layout yang akan kita coba adalah wrap layout.

Apa itu wrap layout?

Sebelum kita jawab.

Kita ubah lagi kode kita dari Column menjadi Row.

Lalu tambahkan dua buah kotak lagi seperti berikut:

body: SafeArea(
  child: Row(
    children: [
      buatKotak(Colors.greenAccent, 100),
      buatKotak(Colors.orangeAccent[400], 70),
      buatKotak(Colors.greenAccent, 50),
      buatKotak(Colors.orangeAccent[400], 90),
      buatKotak(Colors.red[300], 110),
      buatKotak(Colors.blue[300], 30),
    ],
  ),
)

Jalankan aplikasi.

Kita akan dapati pada bagian sebelah kanan, ada kotak seperti garis polisi. Ini menandakan bahwa ukuran layar ponsel tidak cukup untuk merender semua komponen.

Sekarang, coba ganti widget Row menjadi Wrap.

Kemudian jalankan kembali aplikasinya.

Tara!

Dengan wrap, komponen apa pun yang tidak bisa dirender akibat layar penuh, otomatis akan dirender pada baris berikutnya.

Pertemuan Selanjutnya

Pada beberapa pertemuan kedepan, insyaallah kita akan coba membahas lebih detil lagi tentang Row, Column, dan Wrap layout. Beberapa variasi dari main axis alignment, dan insyaallah akan kita bahas juga tentang grid layout pada flutter.

Dan untuk latihan, di akhir seri tutorial flutter ini. Insyaallah kita akan coba terapkan tangkapan layar berikut ini pada flutter: