Membuat Baris dan Kolom pada Tampilan Aplikasi Mobile

Assalamu'alaikum wr wb

Hai teman-teman!

Kali ini saya akan membahas cara membuat baris dan kolom pada tampilan aplikasi mobile di VS Code. Sebelumnya teman-teman harus menginstal terlebih dahulu aplikasi flutter dan terkoneksi dengan internet. Sedikt saya bahas 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 baris, kolom maupun grids dll. Susunan icon-icon merupakan bagian dari kolom dan baris yang tidak terlihat.

Program

Penjelasan

1. import 'package:flutter/material.dart'; digunakan untuk mengimport apa yang ada dalam class yang telah di buat.
2. class LayoutRow extends StatelessWidget {} digunakan untuk membuat nama class, class diberi nama LayoutRow
3. Widget build(BuildContext context) {} digunakan sebagai kelas untuk memuat widget yang bersifat statis.
4. return MaterialApp() berguna untuk memuat fungsi dari widget
5. home: Scaffold() merupakan widget utama yang digunakan untuk membuat sebuah halaman pada flutter dengan widgwt Scaffold
6. appBar: AppBar() merupakan salah satu properti yang dimiliki widget Scaffold pada aplikasi sebagai menu bar 
7. flexibleSpace: SafeArea() merupakan widget flexibleSpace yang digunakan untuk memasang silver menghindari intrupsi sistem operasi.
8. child: Container() digunakan untuk memuat baris dari bagian yang akan di muat.
9. child: Column() digunakan untuk membuat column
10. children: [] isi dari sebuah bagian
11. Row() digunakan untuk membuat sebuah baris
12. IconButton() berguna untuk menampilkan menu iconButton
13. icon: Icon(Icons.menu), adalah perintah untuk menentukan jenis icon yang digunakan, yaitu icon menu
14. tooltip: 'Navigation menu', merupakan Teks yang menjelaskan tindakan yang akan terjadi saat tombol ditekan.
15. onPressed: null,  adalah reaksi dari icon ketika di tekan tidak terjadi reaksi apapun.
16. Spacer(), merupakan perintah untuk memberikan jarak pada suatu penulisan antar kolom
17. Text() digunakan untuk membuat teks
18. 'Kantin Politeknik Kampar', merupakan teks yang akan tampil pada bagian appbar
19. textAlign: TextAlign.center, merupakan posisi dari teks. (left: rata kiri, center: tengah, right: kanan)
20. body: Container() merupakan salah satu bagian tampilan yang menampilkan isi dari aplikasi. 
21. void main() {} merupakan Fungsi main() yang merupakan fungsi khusus dari dart. Ketika aplikasi dijalankan, maka fungsi ini yang pertama kali dijalankan. 
22. runApp(LayoutRow()); merupakan perintah untuk menjalankan class 

Output

Sekian Penjelasan dari saya, semoga teman-teman dapat memahaminya.
Wassalamu'alaikum Wr Wb