Membuat Layout Baris dan Kolom Pada Mobile Programing

 Assalamu'alaikum wr,wb

hai teman-teman....kali ini aku bakal memberikan tutorial tentang membuat baris dan kolom atau layout dalam materi mobile programing...penasaran? langsung baca aja ya!

Layout adalah suatu tampilan tata letak pada android studio untuk mengatur penempatan text/gambar sesuai yang kita inginkan. jadi layout di sini adalah bagian terpenting untuk memperindah tampilan atau design pada aplikasi yang kita buat agar nyaman di lihat bagi pengguna aplikasi kita.

Liniear Layout adalah design sebuah tampilan pada aplikasi dengan tata letak secara vertical maupun horizontal dimana tata letak aplikasi yang kita buat hanya bisa memasukan media secara mendatar dan menurun.

Relative Layout design tampilan pada aplikasi kita dengan tata letak secara bebas tanpa aturan sesuai keinginan kita. Tidak seperti Linear Layout yang hanya terpaku pada salah satu tampilan vertical dan horizontal.

Constraint Layout mirip dengan Relative Layout, akan tetapi karena letak View bergantung pada View lain dalam satu Layout ataupun dengan Parent Layoutnya. Contohnya pada Relative Layout kita dapat meletakkan sebuah View pada bagian atas, bawah, atau samping di View lain. Kita juga dapat mengatur posisinya berdasarkan Parent Layout menggunakan tag seperti centerVertical, alignParentBottom, dll. Akan tetapi, Constraint Layout jauh lebih fleksibel dan lebih mudah digunakan di Layout Editor.

Frame Layout adalah Layout yang biasanya digunakan untuk membuat objek yang saling bertindihan contohnya yaitu kita membuat button di atas image.

Table Layout adalah Layout yang digunakan untuk membangun user interface (tampilan antar muka ) aplikasi android dengan berdasarkan Baris dan Kolom.

Table Layout terdiri dari:

1. Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.

2. Kolom adalah sub bagian terbagi dari setiap baris dan satu baris dapat menampung beberapa jenis kolom. Setiap kolom terdiri dari jenis informasi yang berbeda mengenai baris tersebut.

Tag Table Layout

Beberapa tag pada Table Layout :

a. TableLayout : Tag pembuka untuk menggunakan TableLayout

b. TableRow : Tag untuk membuat Baris

Langkah Pengerjaan :

1. pastikan sudah terinstall flutter

2. buka aplikasi editor Visual Studio Code

3. buat file dart baru, dengan cara view > Command Palette (Ctrl+Shift+P) > lalu ketikkan "flutter" > pilih Flutter : New Aplication Project  > lalu pilih tempat penyimpanan project nya > kllik select a folder to create the project in > lalu ketikkan nama untuk program tersebut > enter.

4. lalu akan langsung muncul program main.dart, hapus semua isinya lalu gantikan dengan program di bawah ini: 

penjelasan dari program di atas :

setelah program menambahkan material.dart, selanjutnya membuat class baru yakni class LayoutRow. Kelas Tampilan akan memuat kelas StatelessWidget indikatornya menggunakan kata extends sehingga source code menjadi Class LayoutRow extends StatelessWidget. dengan demikian maka semua komponen yang terdapat pada kelas StatelessWidget dapat digunakan oleh kelas LayoutRow.

Untuk membuat nama class harus menggunakan huruf kapital. Kelas StatelessWidget adalah kelas yang memuat widget yang sifatnya statis maksudnya adalah setelah data ditampilkan maka kita tidak akan merubahnya lagi.

Widget build (BuildContext context) merupakan fungsi yang harus ada untuk kelas yang akan menampilan widget atau tampilan ke layar perangkat bergerak. Atau dalam docs flutter disebutkan sebagai instan untuk membentuk widget. 

Selanjutnya instant dari build memiliki nilai balikan berupa MaterialApp indikatornya terdapat pemanggilan fungsi return MaterialApp(). Fungsi ini memuat berbagai widget didalamnya seperti title,home dan lain-lain. Detail dari fungsi masing-masing baris :

  

5. lalu di explorer > pilih test > lalu pilih program widget_test.dart > lalu jadikan komentar semua isi di dalam program tersebut. dengan cara Ctrl+A lalu Ctrl+/

6. save semua program yang sudah di ubah.

7. lalu run dan debug program main.dart nya. pilih tampilannya kemana, jika ke android mu maka hubungkan androidmu menggunakan kabel USB dan pastikan androidmu dalam mode pengembang.

8. berikut adalah hasil output dari program di atas :

nah itu dia teman-teman tutorial membuat layout tabel.

untuk source code nya kamu bisa klik Disini!

terimakasih sudah membaca hingga selesai!!!