Membuat Tampilan AppBar Pada Mobile Programming Dengan Flutter

-
 Assalamualaikum Warahmatullahi Wabarakatuh..

Di blog kali ini saya ingin sedikit menjelaskan membuat tampilan AppBar Pada Mobile Programming dengan flutter. 

    AppBar atau Toolbar sangatlah penting dalam pengembangan aplikasi mobile, AppBar digunakan untuk menampilkan Judul aplikasi, Menu Icon, MenuOverflow, Menu Navigasi. dll. Untuk membuat AppBar menggunakan Flutter sangatlah mudah, karena Flutter menyediakan widget siap pakai yang langsung dapat kita gunakan. AppBar didalam Flutter mempuyai konsep Material Design yang modern, dan dapat kita custom dengan mudah. Pada tutorial ini kita akan belajar, cara membuat AppBar pada Mobile Programming dengan flutter. Ikuti langkah-langkahnya ya!

1. Pertama buka aplikasi Visual Studio Code

2. Lalu klik view dan pilih Command Pallete


3. Selanjutnya ketik flutter: New Aplication Project
4. Kemudian simpan project di dalam suatu folder sesuai keinginan.


5. Lalu beri nama project
6. Selanjutnya klik teks > widget_testdart, jadikan semua source code menjadi komen dengan cara menekan "CTRL+/".
7. Kemudian klik teks > main.dart copy semua source code dan kemudian hapus. Lalu masukkan source berikut kedalam main.dart


Penjelasan source code :
-  import 'package:flutter/material.dart'; adalah Fungsi main() adalah fungsi khusus dari dart. Ketika aplikasi dijalankan, maka fungsi ini yang pertama kali dijalankan. 
-  class Tampilan extends StatelessWidget { dan return MaterialApp : Untuk membuat widget, kita harus membuat class. Pada code kita deklarasikan class Tampilan yang di extends dari class StatelessWidget dari material.dart package. StatelessWidget memiliki method yang harus kita definisikan, yaitu method build dengan argument BuildContext. Build function akan mengembalikan widget Text yang berisi ‘Hallo’ menggunakan object MaterialApp dengan route home. Route adalah abstrak dari screen atau page pada sebuah aplikasi.MaterialApp adalah widget yang mudah digunakan untuk membungkus sejumlah widget yang biasanya diperlukan untuk aplikasi material design. 
- home: Scaffold( dan appBar: AppBar( : Scaffold adalah widget utama untuk membuat sebuah halaman pada flutter, scaffold ini memiliki beberapa parameter yang biasa kita gunakan seperti appBar untuk membuat AppBar, body untuk bagian tubuhnya, atau kita juga bisa menambahkan floating action bar, maupun mengganti warna background bodynya.
- title: Text('Sample Code') : Didalam widget Scaffold, kita tambahkan tittle dengan teks "Sample Code" pada AppBar tersebut
- body: Center(child: Text('Hallo')) : Agar title/judul berada ditengah, kalian dapat menambahkan widget Center dan memasukan widget Text sebagai anaknya.
-Color: Colors.blueGrey.shade200 : untuk mengubah warna latar belakang pada tampilannya dengan warna bluegrey.
- void main() { dan runApp(Tampilan()); adalah metode utama untuk menjalankan programnya atau aplikasinya.

Nah setelah dijalankan maka akan tampil seperti ini:


Selanjutnya kita akan menambah  icon button pada AppBar dengan menambah source code berikut dalam codingan sebelumnya :

Penjelasan :
- leading: const IconButton( : leading berfungsi untuk menambahkan action/button/icon pada sudut kiri appbar.
- icon: Icon(Icons.menu), : icon button ini berfungsi sebagai menu pada appbar
- tooltip: 'Navigation menu' : Tooltip merupakan sebuah pesan yang muncul ketika kita menekan tombol menu
- onPressed: null, : untuk menonaktifkan icon button pada appbar tersebut atau memberi nilai null pada icon button nya. 
Hasil tampillannya :

Hasil tampilan jika teks pada AppBar kita hapus :


Okee guys, sekian penjelasan dari saya semoga bermanfaat :) Tetap Semangat!!!!


Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Menghubungkan Java Dengan Database MySQL

-
Gambar
Assalamualaikum Warahmatullahi Wabarakatuh.. Hello Guys! Welcome back to my blogšŸ˜Š Di blog kali ini saya ingin membuat database dengan menghubungkan java dengan database MySQL, software yang digunakan yaitu java, Neatbens dan XAMPP. Oke guys, berikut langkah-langkahnya: 1. Pertama, buka aplikasi XAMPP aktifkan Apache dan MySQL 2. Buka browser dan akses link http://localhost/phpmyadmin/ yang berfungsi untuk membuat database 3. Lalu buat nama databasenya (disini saya membuat nama databasenya; db_perpustakaan) 4. Selanjutnya buat nama tabel dan panjang tabelnya 5. Lalu, isi kolom dengan memasukkan nama kolom, tipe datanya, isi dari karakternya dan pilih atributnya apakah termasuk primery key atau unique key. 6. Setelah itu, maka akan tampil isi dari kolom yang kita isi seperti gambar dibawah ini : 7. Selanjutnya, buka Neatbens dan buat project baru, lalu tambahkan library MySQL JDBC DRIVER untuk project baru yang kita buat tadi. Caranya yaitu klik kanan pada folder libraries, lalu kli...
Baca selengkapnya

PROGRAM KASIR SEDERHANA DENGAN BAHASA JAVA MENGGUNAKAN ARRAY

-
Gambar
 Assalamualaikum warahmatullahi wabarakatuh... Hello Guys!! Welcome Back at My BlogšŸ’“ Teman-teman pasti sudah tak asing mendengar kata kasir, karena sekarang saat kita berbelanja di supermarket , mall , restoran , maupun toko-toko yang menjual peralatan pasti ada kasir. Pernah gak sih teman-teman berfikir bagaimana cara membuat program kasir tersebut? Nah kali ini kita akan membuat program kasir sederhana menggunakan Java.  Sebelumnya teman-teman tau gak sih Array itu apa? Tipe data array adalah tipe data yang terdiri dari kumpulan tipe data lain. Dalam bahasa Indonesia, array dikenal juga dengan istilah Larik. Dengan array, proses penyimpanan data ke dalam variabel menjadi lebih efisien dan mudah, terutama jika memiliki data dalam jumlah banyak. Anggota atau isi dari array itu sendiri harus satu jenis tipe data, misalkan terdiri dari kumpulan angka bulat saja (integer), kumpulan karakter saja (char), maupun kumpulan angka pecahan saja (double). Di dalam bahasa Java, kita tida...
Baca selengkapnya

Raspberry Pi

-
Gambar
  APA ITU RASPBERRY PI?      Raspberry Pi, sering disingkat dengan nama Raspi, merupakan komputer papan tunggal (single-board circuit; SBC) yang seukuran dengan kartu kredit yang dapat digunakan untuk menjalankan program perkantoran, permainan komputer, dan sebagai pemutar media hingga video beresolusi tinggi.   Nama Raspberry Pi diambil dari nama buah, yaitu buah Raspberry, sedangkan Pi diambil dari kata Python, yaitu nama dari sebuah bahasa pemrograman. Python dijadikan bahasa pemrograman utama dari Raspberry Pi, namun tidak tertutup kemungkinan untuk menggunakan bahasa pemrograman lain pada Raspberry Pi.       Raspberry Pi pertama kali dikembangkan di laboratorium Komputer Universitas Cambridge oleh Eben Upton, Rob Mullins, Jack Lang, dan Alan Mycrof. Mereka kemudian mendirikan yayasan Raspberry Pi bersama dengan Pete Lomas dan David Braben pada tahun 2009. Pada tahun 2012, Raspberry Pi Model B memasuki produksi massal. Dalam peluncur...
Baca selengkapnya