Layout Baris Dan Kolom Mobile Programming💻
Assalamualaikum wr.wb
Hallo sahabat ngoding artikel kali ini membahas mengenai membuat layout baris dan kolom pada materi mobile programming. Berikut alat dan bahan yang digunakan:
a. Pc/Laptop yang memenuhi kapasitas mobile programming
b. Internet yang memadai
c. Smartphone
1. Teori
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, Layout di bagi menjadi 4 yaitu:
a. Linear Layout
b. Relative Layout
c. Frame Layout
d. Table Layout
Liniear Layout adalah design sebuah tampilan pada aplikasi kita dengan tata letak secara vertical maupun horizontal dimana tata letak aplikasi yg 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:
a. Row/ baris pada dasarnya digunakan untuk menyimpan satu jenis record, hanya satu informasi yang dapat disimpan.
b. 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 :
- TableLayout : Tag pembuka untuk menggunakan TableLayout
- TableRow : Tag untuk membuat Baris
Inti dari mekanisme layout pada flutter adalah widget. Di Flutter semua adalah widget
termasuk layout itu sendiri juga merupakan widget. Gambar, icon, dan text yang terdapat
pada flutter adalah widget. Selain sesuatu yang tidak terlihat juga merupakan widget, seperti
bari, kolom mauapun grids.
2. Langkah-Langkah
a. Buka Aplikasi Visual Studio Code
b. Setelah semua selesai pastikan hanphone terkoneksi dengan pc atau laptop yang digunakan untuk mengoneksikan mennggunakan kabel USB, pastikan keduanya memiliki koneksi internet yang cukup kemudian pilih bagian view >> command palette
c. Maka akan muncul teks box, pada taks box tersebut ketikkan flutter new application project seperti gambar dibawah ini
d. Kemudian akan diarahkan kebagian lokasi penyimpanan untuk menyimpan projek yang akan dibuat Setelah selesai peletakan penyimpanan, setelah muncul, pada bagian folder test widget_test.dart komentari semua script dengan cara ctrl+a+? .
e. Setelah selesai masuk kebagian main dart hapus semua script yang terdapat pada file main.dart setelah dihapus buat source code seperti dibawah ini.
f. Setelah selesai runningkan program yang sudah dibuat, jika berhasil akan tampil pada smartphone seperti gambar dibawah ini, setelah tampil g. Selanjutnya untuk membuat body yang berisi baris dan kolom, pada main dart tadi tambahkan source code nya seperti gambar dibawah ini
h. Setelah selesai kemudian runningkan maka pada smartphone dan browser akan tampil seperti gambar dibawah ini
3. Penjelasan Source Code import 'package:flutter/material.dart'; // Tempat menyimpan data dari program yang dibuat //
class LayoutRow extends StatelessWidget { // Nama kelasnya adalah LayoutRow, yang mana dalam kelas ini terdapat StatelessWidget yaitu kelas yang memuat widget yang sifatnya statis atau tetap //
Widget build(BuildContext context) { // Merupakan fungsi yang harus ada untuk kelas yang akan menampilkan widget ke layar perangkat bergerak //
return MaterialApp( // Nilai balikan berupa MaterialApp //
home: Scaffold( // Dalam nilai balikan ini terdapat menu Home //
appBar: AppBar( // bara yang berada diatas aplikasi //
flexibleSpace: SafeArea( // Merupakan Widget Fleksibel space //
child: Container( // terdapat suatu wadah //
child: Column( // membuat sebuah kolom //
children: [ // kemudian terdapat anak //
Row( // Baris pertama //
children: [ // didalamnya terdapat anak //
IconButton( // terdapat tombol //
icon: Icon(Icons.menu),// Terdapat ikon dari menu //
tooltip: 'Navigation menu', // terdapat Tombol atau menu navigasi //
onPressed: null, // null disables the button
),
Spacer(),
Text( // masukkan teks //
'Kantin Politeknik Kampar',
textAlign: TextAlign.center,
), // Ini merupakan teks yang akan tampil pada layar //
Spacer()
],
)
],
),
)),
),
body: Container( // untuk wadah bagian ini berisi body//
child: Column( // terdapat juga kolom //
children: [
Row( // dan membuat Baris //
children: [
Text( // masukkan teks //
'Kolom Pertama Baris Pertama', // isi dari teks //
textAlign: TextAlign.left,
), // Pada bagian kiri //
Spacer(),
Text( // masukkan teks //
'Kolom Kedua Baris Pertama',
textAlign: TextAlign.center,
), // Untuk bagian tengah pada layar //
Spacer(),
Text( // masukkan teks //
'Kolom Ketiga Baris Pertama',
textAlign: TextAlign.right, // untuk bagian kanan //
),
],
)
],
),
)));
}
}
void main() { // Fungsi pada program //
runApp(LayoutRow()); // Jalankan program dengan nama kelas LayoutRow//
}
