Membuat Column dan Row Pada Flutter

Hello people with spirit of learning!

Flutter dikenal dengan beragam widgets yang dapat membangun UI pada aplikasi kita. Disini saya akan menjelaskan Widget yang wajib kamu tahu yaitu Row dan Column (Baris dan Kolom). Disini kita akan mencoba menggunakan kedua Widget ini dengan Row didalam Column.

Step 1 : Menambahkan Widgets Column

Yang pertama kita menambahkan widget column terlebih dahulu. Step ini adalah langkah awal untuk membuat column. Begitu juga dengan membuat Row.

Step 2 : Isi dengan Widget Text dan Row

Langkah kedua kita isi Widget column dengan Widget text dan Row. Disini saya akan mengisi Widget Column dengan 3 Row. Dan Widget text-nya akan kita gunakan sebagai tanda urutan barisnya.

Step 3 : Widget Row kita isi dengan widget apapun

Langkah ketiga adalah Widget row akan diisin dengan Apapun. Disini saya isi dengan container saja. Untuk Container-nya kita styling terlebih dahulu ya. Kamu juga bisa style Container-nya sesuai keinginan kamu. Gunakan Sizebox untuk memberi jarak antar containernya.

Step 4 : Tambahkan CrossAxisAligment pada column

Langkah Terakhir adalah menambahkan CrossAxisAligment pada colum, Fungsi CrossAxisAligment pada column adalah menempatkan posisi widget yang ada di column secara horizontal. Disini gunakan CrossAxisAligment.start agar semua widgetnya menjadi rata kiri / Align left.

Kita baru saja menyelesaikan Column yang isinya terdapat 3 Row. Dalam membangun sebuah project pada flutter, Kedua widget ini sering dipakai untuk Menyusun widget-widget yang akan dipakai sesuai keinginan kita.

Semoga bermanfaat dan Terima kasih!