Menggunakan App Bar Mobile Programing

Menggunakan App Bar Mobile Programing


halo gais jadi di blog kali ini saya akan membahas bagaimana cara menggunakan  App Bar pada Mobile Programing semoga teman-teman dapat memahami apa yang saya jelaskan dibawah yaa....

pertama-tama teman-teman disini udah pada tau belum apa itu app bar?

app bar atau aplication bar atau actionbar adalah salah satu bagian dari aplikasi mobile yang digunakan untuk menampilkan beberapa navigasi dari aplikasi. posisi appbar berada pada bagian atas aplikasi. appbar biasanya berisi tittle , action button, navigasi drawer, form pencarioan dan lain-lain. 

menggunakan Flutter, dibutuhkan suatu Widget yang digunakan untuk mengatur segala route, theme dari suatu aplikasi,

1. buka aplikasi visual studio code nya terlebih dahulu,maka akan tampil seperti gambar dibawah ini:


2. lalu klik view> command pallate



3. setelah itu akan tampil dimana anda akan meletakkan project ini, disini saya akan meletakkan project nya di data D kemudian buat folder baru lalu klik select a folder to create a project in.


4. setelah itu akan tampil message anda diminta memberi nama project, disini anda bebas memberi nama project , saya membuat project name nya yaitu: bebas.


5, setelah itu enter, maka akan tampil message  box dan lakukan seperti gambar dibawah:
 

6. lalu kita menunggu flutter nya running




7. setelah itu akan tampil seperti gambar dibawah ini lalu klik test > klik widgest_test.dart maka akan tampil seperti gambar dibawah kemudian blok semua lalu jadikan komen dengan cara CTRL+slice(/) .


8. jangan lupa hubungkan laptop atau pc anda dengan mobile virtual seperti smartphone, hubungkan dengan kabel usb jangan lupa aktifkan mobile nya

9. setelah itu kembali pada main,draft delete semua source code sebelumnya  dan ketikkan source code seperti dibawah ini untuk menampilkan hallo pada app mirror dan untuk menampilkan Menu Bar pada app mirror.


source code nya dan klik run and debug untuk menjalankan source code nya


penejelasan program:
baris 1: Berikut ini adalah sintaksis dari pernyataan package di Java untuk meletakkan hasil kompilasi ke dalam material dart.
baris 2: adalah nama class nya yaitu tampilan
baris 3: widget build adalah konstruktor nya
baris 4: menggunakan widget MaterialApp dapat kamu manfaatkan options home disini. Untuk value yang diberikan di home, merupakan Widget dari Widget yang ingin kamu tampilkan.
baris 5: : berfungsi jika diminimize maka hasilnya sama seperti yang ada di app
baris 6: appBar nah ini adalah tittle nya dimana app bar ini ditampilkan dengan bantuan widget tadi atau untuk mensetting judul dari aplikasi
baris 7 : tittle disini adalah variable tempat menyimpan text yaitu sample code
baris 8: kurung kurawal
baris 9: body disini berisi teks "hallo" yang akan anda tampilkan pada app mirror nantinya
baris 10: nah ini untuk mengsetting warna latar dari chat hallo nanti isetting berwana biru untuk bagian bar nya lalu abu-abu untuk latar teks nya.
baris 11: kurung kurawal akhir dari program

10. setelah dirun and debug maka tampil output seperti dibawah ini:



11. setelah itu kita akan menampilkan menu bar seperti garis tiga disamping pojok kiri maka tambahkan source code dibawah ini (dikotak merah):
 

penjelasan program diatas: leading beerfungsi untuk menambahkan action/button/icon pada sudut kiri app bar.

12. setelah dirun maka hasilnya akan tampil seperti dibawah ini:




13. selanjutnya kita akan menghilangkan tanda sample code maka hapus baris source code ysng menampilkan sample code tadi pada baris kedua belas gambar dibawah ini, lalu run and debug.




14. maka akan tampil hasil akhirnya seperti ini ,seperti gambar dibawah sudah tampil app bar nya dan sudah hilang teks sample code nya.:




baiklah sekian penjelasan dan beberapa tampilan foto penjelasan dari saya lebih dan kurang saya mohon maaf terima kasih banyak dan semoga bermanfaat ya....


 














Komentar

Posting Komentar

Postingan populer dari blog ini

Program Kasir dengan Bahasa Java

Gambar
 halo gaizz... balik lagi bersama saya di blog kali ini saya akan membahas tentang program java secara lengkap karena disini saya menggunakan fungsi dari percabangan dan perulangan yaitu percabangan if else dan perulangan for.sebelum nya  saya akan menjelaskan apa itu percabangan dan perulangan kepada teman-teman agar teman-teman semakin paham. berikut penjelasannya: Contoh format stuktur IF seperti ini: if ( suatu_kondisi ) { // lakukan sesuatu kalau kondisi benar // Lakukan ini juga } suatu_kondisi  hanya bernilai  true / false  saja. Kita bisa gunakan operator relasi dan logika di sini.  Sebelumnya, kamu perlu tahu dulu tiga bentuk percabangan pada Java: Percabangan IF adalah Percabangan ini hanya memiliki satu pilihan. Artinya, pilihan di dalam IF hanya akan dikerjakan kalau kondisinya benar.Tapi kalau salah… tidak akan melakukan apa-apa. Alias lanjut eksekusi ke perintah berikutnya. Percabangan IF/ELSE Sedangkan percabangan IF/ELSE memiliki...
Baca selengkapnya

MEMBUAT PROGRAM KASIR SEDERHANA MENGGUNAKAN ARRAY DENGAN BAHASA JAVA

Gambar
MEMBUAT PROGRAM KASIR SEDERHANA MENGGUNAKAN ARRAY DENGAN BAHASA JAVA Hai gaiz balik lagi di blog saya kali ini saya akan membahas bagaimana cara membuat program kasir sederhana menggunakan array dengan bahasa java. so jangan lupa di baca sampai akhir yaaaa ^^ mari berkenalan dengan array,array adalah sebuah variabel yang menyimpan sekumpulan data yang memiliki tipe data sama. Setiap data tersebut menempati lokasi atau alamat memori yang berbeda-beda dan selanjutnya disebut dengan elemn array.elemen array itu kemudian dapat kita akses melalui indeks yang terdapat didalamya. Cara Menambahkan Data ke Dalam Array: Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array: Mengisi menggunakan indeks; Mengisi menggunakan method  push() . Mengisi dengan indeks maksudnya begini… Misal kita punya array dengan isi sebagai berikut: var barang = [ "barang 1" , "barang 2" , "barang 3" ]; Terdapat tiga data di dalam array  barang  dengan indeks: 0 :  "b...
Baca selengkapnya

Program Kalkulator Sederhana Menggunakan Bahasa Java

Gambar
 Membuat Program Kalkulator Sederhana Menggunakan Bahasa Java Halo gaiss balik lagi dengan blog baru di semester baru ,,,  kali ini kita akan membahasa bagaimana cara membuat program kalkulator sederhana menggunakan bahasa pemrograman java teman-teman pasti sudah tau  tentunya apa itu kalkulator bukan? nah kali ini saya akan membuat kalkulator versi desktop untuk mempermudah teman-teman saat akan melakukan perhitungan matematika sederhana .  Program yang dibuat yaitu berbasis CLI ( Command Line Interface ) dan GUI ( Graphic User Interface ) yang kita buat menggunakan aplikasi netbeans, netbeans sendiri merupakan IDE berbasis java yang banyak digunakan untuk membuat aplikasi berbasis desktop. baiklah berikut adalah tampilan kalkulator nya: nah selanjutnya adalah langkah-langkah nya: 1.buka aplikasi Netbeans anda 2.lalu pilih file(terletak disudut paling pojok sebelah kiri)  3.klik new project > lalu kategori java >pilih project java application > lalu kl...
Baca selengkapnya