Menampilkan Baris dan Kolom Pada Mobile Programing
Halo gais pada kesempatan kali ini saya akan menampilkan baris dan kolom menggunakan flutter menggunakan aplikasi visual studio code. nah ini adalah salah satu materi dari mobile programing nih. widget adalah sebuah “perwakilan” dari aplikasi yang memungkinkan pengguna untuk dapat menggunakan fitur dari aplikasi yang diwakilkan tersebut secara langsung tanpa harus membuka aplikasi “sesungguhnya”. Biasanya widget terletak pada home screen atau tampilan awal layar perangkat Android anda. Atau bisa dibilang widget merupakan aplikasi versi mini yang bisa digunakan secara langsung pada home screen. nah disini kita akan menambahkan layout berupa kolom dan baris beserta teks didalamnya
berikut adalah langkah-langkah untuk menampilkan nya:
1. buka aplikasi visual studio code terlebih dahulu, jangan lupa hubungkan smartphone anda sebagai mobile dengan pc atau laptop anda.
2. setelah itu klik view > command pallete > pilih flutter new aplication project
3. setelah itu buat new folder lalu klik select a folder to create the project in
4. setelah itu klik enter dan buat project name nya (project name disini tidak boleh diberikan spasi dan tidak boleh menggunakan huruf kapital)
5. setelah itu tunggu karena flutter nya sedang running
6.setelah se;esai dirunning klik test di samping sebelah kiri lalu pilih widget_test blog semua source code sebelumnya lalu jadikan komen dengan menekan CTRL+SLICE(/)
7. setelah itu klik lib lalu pilih main dart. pada main dart hapus semua source code sebelumnya lalu ketik source code dibawah ini:
penjelasan:
baris 1: berfungsi untuk mengimpport apa yang kita upload dalam class yang kita buat
baris 2: berfungsi dalam pembuatan nama class disini nama class
baris 3: berfungsi sebagai classs yang menampung widget
baris 4: berfungsi untuk memuat isi dari widget
baris 5: berfungsi sebagai widget utama unutk membuat halaman pada flutter
baris 6: berfungsi sebai petunjuk dalam penggunaan sebuah aplikasi untuk memudahkan sipengguna
baris 7: berfungsi untuk menhindari interupsi pada sistem operasi
baris 8: berfungsi unutuk membuat baris judul
baris 9: berfungsi unutuk membuat kolom
baris 10: berfungsi menampung isi dari judul
baris 11: berfungsi untuk membuat suatu baris
baris 12: berfungsi untuk membuat baris
baris 13: berfungsi unutk menampilkan icon menu
baris 14: berfungsi untuk menampilkan menu
baris 15: berisi keterangan null
baris 16: berfungsi untuk memberikan spasi pada setiap teks
baris 17: berfungsi untuk menampung teks
baris 18: teks yang akan ditampilkan sebagai judul letaknya berada dibagian paling atas
baris 19: berfungsi mengatur letak dan posisi dari teks tadi disini diatur agar teks terletak ditengah
baris 24: berfungsi mmeberikan spasi pada setiap penulisan
baris 25-32: kurung kurawal
baris 33: berfungsi sebagai method untuk program yang akan dijalankan
baris 34: berfungsi untuk menajalankan class diatas.
8. setelah itu klik start debug dan tunggu hingga hasilnya pada aplikasi visual studio code mirror di smartphone anda tampil seperti dibawah ini:
9. nah jika sudah tampil seperti diatas selanjutnya kita akan menambahkan teks baris dan kolom pada aplikasi mirror tersebut dengan cara menambahkan source code dibawah ini atau membuat class baru pada main dart nya:
penjelasan:
baris 1: berfungsi untuk mengimpport apa yang kita upload dalam class yang kita buat
baris 2: berfungsi dalam pembuatan nama class disini nama class
baris 3: berfungsi sebagai classs yang menampung widget
baris 4: berfungsi untuk memuat isi dari widget
baris 5: berfungsi sebagai widget utama unutk membuat halaman pada flutter
baris 6: berfungsi sebai petunjuk dalam penggunaan sebuah aplikasi untuk memudahkan sipengguna
baris 7: berfungsi untuk menhindari interupsi pada sistem operasi
baris 8: berfungsi unutuk membuat baris judul
baris 9: berfungsi unutuk membuat kolom
baris 10: berfungsi menampung isi dari judul
baris 11: berfungsi untuk membuat suatu baris
baris 12: berfungsi untuk membuat baris
baris 13: berfungsi unutk menampilkan icon menu
baris 14: berfungsi untuk menampilkan menu
baris 15: berisi keterangan null
baris 16: berfungsi untuk memberikan spasi pada setiap teks
baris 17: berfungsi untuk menampung teks
baris 18: teks yang akan ditampilkan sebagai judul letaknya berada dibagian paling atas
baris 19: berfungsi mengatur letak dan posisi dari teks tadi disini diatur agar teks terletak ditengah
baris 20: berfungsi mmeberikan spasi pada setiap penulisan
baris 25-32: kurung kurawal
baris 33: berfungsi untuk membuat baris
baris 35: berfungsi untuk menampung teks
baris 36: teks yang akan ditampilkan pada widget nya nanti
baris 37: berfungsi untuk mengatur letak teks
baris 38: berfungsi memberikan spasi pada setiap teks
baris 39: berfungsi untuk mengatur letak teks
baris 40: berfungsi memberikan spasi pada setiap teks
baris 41: berfungsi menampung teks
baris 42: teks yang akan ditampilkan pada widget nya nanti
baris 43: berfungsi untuk mengatur letak teks
baris 44: berfungsi sebagai method untuk program yang akan dijalankan
baris 45: berfungsi untuk menajalankan class diatas.
10. selanjutnya running kembali dengan klik start debug lalu hasil akhir nya akan tampil seperti gambar dibawah ini:
baiklah sekian penjelasan source code dan tutorial untuk menampilkan baris dan kolom menggunakan aplikasi visual studio code diatas, jika ada pertanyaan yang ingin anda tanyakan silahkan komen di kolom komentar yaa teman-teman terimakasih banyak.....
Komentar
Posting Komentar