Flutter - Memahami Konsep Tata Letak (Layout) di Flutter

22/03/2022

Flutter berbeda dari framework lain karena antramukanya (UI) ditulis langsung dalam Widget menggunakan bahasa pemrograman Dart, bukan dalam file XML untuk Android Native, atau CSS untuk Web. Widget adalah blok dasar pembangun tata letak (layout) UI Flutter. Hampir semua hal di Flutter adalah widget. Widget adalah objek yang tidak dapat diubah yang mencerminkan bagian tertentu dari UI.

Pada tutorial ini, kita akan belajar memahami cara kerja beberapa widget dasar yang biasanya digunakan untuk membuat layout antarmuka pada aplikasi Flutter. Kita juga akan mempelajari bahwa widget Flutter dapat dikomposisi, artinya kita dapat menggabungkan widget yang ada untuk membuat widget yang lebih canggih.

Tips: Agar dapat memahami cara kerja beberapa widget dasar pembangun layout, ikuti setiap latihan yang ada di tutorial ini secara langsung ya.

Widget Row dan Column

Widget Row dan Column merupakan kelas yang dapat berisi dan menata letak widget. Widget di dalam Row atau Column disebut children (anak-anak), sedangkan Row dan Column sendiri disebut sebagai parents (orang tua). Row meletakkan widget-widget di bawahnya secara horizontal, sedangkan Column meletakkan widgetnya secara vertikal.

Latihan 1.1: Membuat Row

Pada latihan 1 berikut bertujuan untuk menampilkan perbedaan antara Row dan Column.

Klik tombol Run untuk menjalankan
Dalam kode, ubah Row ke a Column, dan jalankan lagi.

Ukuran dan Perataan Sumbu (Axis)

Sejauh ini, penampakan dua widget OrangeBox dan BlueBox terlihat menyatu (baik jika diarahkan horizontal maupun vertikal pada layar). Kita dapat mengubah bagaimana ketiga widget tersebut diberi jarak menggunakan properti ukuran sumbu dan perataan yang bisa dilakukan pada widget parent (Row atau Column).

Properti MainAxisSize

Row dan Column menempati sumbu utama yang berbeda. Sumbu utama Row adalah horizontal, sedangkan sumbu utama Column adalah vertikal. Properti mainAxisSize menentukan berapa banyak ruang Row dan Column dapat menempati sumbu utama mereka. Properti mainAxisSize memiliki dua kemungkinan nilai, yaitu: MainAxisSize.max dan MainAxisSize.min.

MainAxisSize.max

Row dan Column menempati semua ruang pada sumbu utamanya. Jika lebar gabungan anak-anak mereka kurang dari total ruang pada sumbu utama mereka, anak-anak mereka ditata dengan penambahan ruang ekstra. Secara default, widget-widget di bawahnya akan ditempatkan pada awal sumbu utama.

MainAxisSize.min

Row dan Column hanya memberikan ruang secukupnya pada sumbu utama untuk widget-widget anak mereka. Widget-widget tersebut ditata tanpa memberikan ruang ekstra dan ditempatkan pada tengah sumbu utama Row dan Column.

Tip: MainAxisSize.max adalah nilai bawaan dari properti mainAxisSize. Jika kita tidak menentukan nilai dari properti mainAxisSize, nilai bawaanlah yang akan digunakan, seperti yang ditunjukkan pada contoh sebelumnya.

Latihan 1.2: Memodifikasi ukuran sumbu

Pada latihan 2 berikut, cobalah menambahkan properti mainAxisSize dan set MainAxisSize.max sebagai nilai awalnya.

Klik tombol Run untuk menjalankan,
Tambahkan properti mainAxisSize pada widget Row dengan nilai MainAxisSize.max,
Ubah MainAxisSize.max ke MainAxisSize.min, dan jalankan lagi.

Properti mainAxisAlignment

Ketika properti mainAxisSize diatur ke MainAxisSize.max, Row dan Column mungkin akan menata widget anak-anak mereka dengan penambahan ruang ekstra. Properti mainAxisAlignment menentukan bagaimana Row dan Column dapat menempatkan anak-anak mereka di ruang ekstra itu. mainAxisAlignment memiliki enam kemungkinan nilai, yaitu:

Nilai properti	Fungsionalitas
`MainAxisAlignment.start`	Memposisikan widget di dekat awal sumbu utama. (Kiri untuk Row, atas untuk Column)
`MainAxisAlignment.end`	Memposisikan widget di dekat ujung sumbu utama. (Kanan untuk Row, bawah untuk Column)
`MainAxisAlignment.center`	Memposisikan widget di tengah sumbu utama.
`MainAxisAlignment.spaceBetween`	Membagi ruang ekstra secara merata di antara widget.
`MainAxisAlignment.spaceEvenly`	Membagi ruang ekstra secara merata antara sebelum dan sesudah widget.
`MainAxisAlignment.spaceAround`	Mirip dengan MainAxisAlignment.spaceEvenly, tetapi mengurangi setengah dari ruang sebelum widget pertama dan setelah widget terakhir menjadi setengah dari lebar antara widget.

Latihan 1.3: Memodifikasi perataan sumbu utama

Pada latihan 3 berikut, cobalah memberikan MainAxisAlignment.start mainAxisAlignment ke nilai defaultnya.

Klik tombol Jalankan .
Tambahkan properti mainAxisAlignment dengan nilai MainAxisAlignment.start
Ubah MainAxisAlignment.start ke MainAxisAlignment.end, dan jalankan lagi.

Properti crossAxisAlignment

Properti crossAxisAlignment menentukan bagaimana Row dan Column dapat memposisikan anak-anak mereka pada sumbu silang mereka. Sumbu silang Row adalah vertikal, dan sumbu silang Column adalah horizontal. Properti crossAxisAlignment memiliki lima kemungkinan nilai:

Nilai Properti	Fungsionalitas
`CrossAxisAlignment.start`	Memposisikan widget di dekat awal sumbu silang. (Atas untuk Row, Kiri untuk Column)
`CrossAxisAlignment.end`	Memposisikan widget di dekat ujung sumbu silang. (Bawah untuk Row, Kanan untuk Column)
`CrossAxisAlignment.center`	Memposisikan widget di tengah sumbu silang. (Tengah untuk Row, Tengah untuk Column)
`CrossAxisAlignment.stretch`	Meregangkan widget melintasi sumbu silang. (Atas-ke-bawah untuk Row, kiri-ke-kanan untuk Column)
`CrossAxisAlignment.baseline`	Menyelaraskan widget dengan garis dasar karakter mereka. (untuk widget Text saja, dan mengharuskan menambahkan properti `textBaseline` dan disetel ke `TextBaseline.alphabetic`. Lihat bagian widget Teks untuk contoh.)

Latihan 1.4: Memodifikasi perataan sumbu silang

Pada latihan 4 berikut, tambahkan properti crossAxisAlignment dan berikan nilai defaultnya, yaitu CrossAxisAlignment.center.

Klik tombol Jalankan .
Ubah CrossAxisAlignment.center ke CrossAxisAlignment.start, dan jalankan lagi.
Cobalah juga untuk mengubah ke nilai lainnya.

Widget Fleksibel (Flexible)

Seperti yang kita lihat, properti mainAxisAlignment and crossAxisAlignment menentukan bagaimana Row dan Column memposisikan widget di sepanjang kedua sumbu (Sumbu utama dan silang). Row dan Column pertama-tama menata widget dengan ukuran (panjang atau lebar) tetap. Namun, widget dengan ukuran tetap dianggap tidak fleksibel karena tidak dapat mengubah ukurannya sendiri setelah ditata di dalam Row atau Column. Jika kemudian kita ingin melakukan pengubahan ukuran dari widget tersebut setelah ditata tanpa harus mengubah ukuran aslinya, kita membutuhkan widget lain yang bisa mengubahnya menjadi fleksibel, yaitu widget Flexible.

Widget Flexible dapat membungkus sebuah widget, sehingga widget yang dibungkusnya menjadi dapat diubah ukurannya. Saat widget Flexible membungkus sebuah widget, widget tersebut menjadi turunan dari widget Flexible widget dan dianggap fleksibel (seperti namanya). Setelah widget yang tidak fleksibel diletakkan, widget dapat diubah ukurannya dengan menyesuiakan properti flex dan fit.

Properti flex

Membandingkan dirinya dengan flex properti lain sebelum menentukan bagian dari total sisa ruang yang diterima setiap widget Flexible. Properti flex bernilai default 1, dapat diganti dengan nilai lainnya.

Properti fit

Menentukan apakah widget Flexible memenuhi semua ruang ekstranya. Properti fit dapat memiliki salah satu dari dua nilai berikut, yaitu: FlexFit.loose, membuat widget tidak memenuhi ruangan. FlexFit.loose merupakan nilai bawaan. Nilai lainnya yaitu FlexFit.tight, memaksa widget untuk mengisi semua ruang ekstra di sekitarnya.

Latihan 2: Mengubah properti fit

Dalam latihan ini, ubah properti fit untuk membuat widget Flexible mengisi ruang ekstra.

Klik tombol Run untuk menjalankan .
Ubah kedua nilai properti fit menjadi FlexFit.tight, dan jalankan lagi.
Coba juga untuk mengubah nilai properti flex menjadi angka lain selain 1. Lihat apa yang terjadi

Widget yang diperluas (Expanded)

Mirip dengan Flexible, widget Expanded dapat membungkus widget dan memaksa widget untuk mengisi ruang ekstra.

Catatan: Apa perbedaan antara widget Flexible dan Expanded? Gunakan Flexible untuk mengubah ukuran widget di Row atau Column. Dengan begitu, kita dapat menyesuaikan jarak widget anak sambil mempertahankan ukurannya dalam kaitannya dengan widget induknya. Widget Expanded mengubah batasan widget anak sedemikian rupa sehingga widget tersebut mengisi ruang kosong yang ada.

Latihan 3: Mengisi ruang ekstra

Latihan berikut menunjukkan bagaimana widget Expanded memaksa widget turunannya untuk mengisi ruang ekstra.

Klik tombol Run untuk menjalankan.
Bungkus widget BlueBox dalam sebuah widget Expanded.

Sebagai contoh:
Expanded(child: BlueBox(),),
Pilih tombol Format untuk memformat kode dengan benar, dan jalankan kembali.

Widget SizedBox (Kotak Berukuran)

Widget SizedBox dapat digunakan dengan salah satu dari dua cara saat membuat dimensi yang tepat. Pertama, SizedBox dapat digunakan dengan membungkus sebuah widget, sehingga Sizedbox dapat mengubah ukuran widget yang dibungkusnya menggunakan properti height and width. Kedua, dengan tidak membungkus widget lain, SizedBox akan membuat ruang kosong dengan ukuran yang diset menggunakan properti height dan width.

Latihan 4: Mengubah ukuran widget

Pada latihan berikut, cobalah membungkus widget BlueBox dengan widget SizedBox dan setel lebar BlueBox menjadi 100 piksel.

Klik tombol Run untuk menalankan,
Tambahkan properti width yang sama dengan 100px di dalam widget SizedBox, dan jalankan lagi.
Coba juga untuk menambahkan SizedBox di antara BlueBox dan OrangeBox kedua dengan width 50. lihat hasilnya

Widget pengatur jarak (Spacer)

Mirip dengan SizedBox, widget Spacer juga dapat membuat ruang antarwidget. Yang membedakan keduanya adalah, Spacer membuat ruang dengan menggunakan properti flex, sehingga lebih fleksibel. Sedangkan SizedBox membuat ruang dengan menambahkan properti width atau height dengan nilai tertentu, sehingga lebih statis.

Latihan 5: Menciptakan lebih banyak ruang

Latihan 5 berikut memisahkan OrangeBox dan BlueBox menggunakan widget Spacer dengan flex bernilai 1.

Klik tombol Run untuk menjalankan .
Tambahkan dua widget Spacer dengan nilai flex 1, masing-masing di antara OrangBox pertama dan BlueBox serta BlueBox dan OrangeBox. Lihat hasilnya
Coba juga ubah nilai flex dari masing-masing Spacer

Widget Teks (Text)

Widget Text menampilkan teks dan memberikan keleluasaan dengan untuk dapat mengkonfigurasikan font, ukuran, dan warna yang diinginkan.

Latihan 6: Meratakan teks

Latihan berikut menampilkan “Halo!Vokasi!Unpak!” dalam tiga widget Text dengan ukuran huruf dan warna yang berbeda. Kita perlu menentukan properti crossAxisAlignment dan textBaseline dalam Row terlebih dahulu untuk memposisikan widget Text. Karena kita ingin memposisikan beberapa widget Text dalam Row, pastikan properti textBaseline bernilai TextBaseline.aplphabetic.

Klik tombol Run untuk menalankan,
Ubah CrossAxisAlignment.start ke CrossAxisAlignment.baseline, dan jalankan lagi.

Widget Icon

Widget Icon berfungi untuk menampilkan simbol grafis yang mewakili aspek UI. Flutter telah menyediakan paket ikon untuk aplikasi Material maupun Cupertino.

Latihan 7: Membuat Ikon

Pada latihan berikut, kita mencoba menampilkan widget Icons.widget dari pustaka Ikon Material dengan warna merah dan biru.

Klik tombol Jalankan .
Tambahkan lagi Widget Icon lain dengan jenis icon dari Material Icon dengan ukuran 50. Kamu bisa memilih icon yang kamu suka
Beri Icon tersebut warna dari Colors.amber palet Material Color, dan jalankan kembali.

Referensi

Diterjemahkan dari Laman Codelabs Flutter dengan beberapa pengubahan. All Credits for Respective Authors.