Membuat IconButton Pada Tampilan Aplikasi Mobile dengan VS Code

Assalamu'alaikum wr wb

Hai teman-teman!

Kali ini saya akan membahas cara membuat IconButton pada tampilan aplikasi mobile di VS Code. Sebelumnya teman-teman harus menginstal terlebih dahulu aplikasi flutter dan terkoneksi dengan internet. Langsung saja saya jelaskan langkah kerjanya

1. Buka aplikasi VS Code

2. Akses menu view > Command Palette

3. Pada command pallete ketik Flutter: New Aplication Project

4. Pilih lokasi penyimpanan

5. Buat nama projek

(Catatan: jangan gunakan huruf kapital dan spasi)

6. Tunggu hingga proses build aplikasi selesai

7. Akan muncul jendela project yang baru saja dibuat.

8. Hapus script yang ada pada file main.dart dan salin kode dibawah ini.

Penjelasan :

import 'package:flutter/material.dart'; adalah perintah import yang digunakan untuk mengakses library pihak ketiga.
class Tampilan extends StatelessWidget adalah deklarasi class Tampilan yang di extends dari class StatelessWidget dari material.dart package.
Widget build(BuildContext context) merupakan argumen method build dari pendefinisian dari method StatelessWidget
return MaterialApp merupakan objek atau widget yang memiliki control untuk mengatur route, theme, supported locales, dan lain sebagainya. Dimana route adalah abstrack dari screen atau tampilan pada sebuah aplikasi.
home: Scaffold merupakan pendefinisian route home dengan widget Scaffold
Scaffold memiliki peran untuk mengatur struktur visual layout dengan mengimplementasikan material design, dimana dia juga memiliki kemampuan untuk membuat app bars, drawers, snack bars, bottom sheets dan lain sebagainya.
appBar: AppBar adalah salah satu properti yang dimiliki oleh Scaffold widget untuk membuat sebuah bar pada aplikasi
leading: const IconButton , Perintah leading digunakan untuk penempatan widget atau IconButton.
icon: Icon(Icons.menu), adalah perintah untuk menentukan jenis icon yang digunakan, yaitu icon menu
tooltip: 'Navigation menu', merupakan Teks yang menjelaskan tindakan yang akan terjadi saat tombol ditekan.
onPressed: null, adalah reaksi dari icon ketika di tekan tidak terjadi reaksi apapun.
title: Text('Sampel Code'), Perintah untuk menampilkan judul dari widget yaitu Sampel Code.
body: Center(child: Text('Hallo')), merupakan perintah untuk menampilkan teks "Hallo" ditengah layar aplikasi.
backgroundColor: Colors.blueGrey.shade200, merupakan perintah untuk memberi warna pada bagian body tampilan aplikasi.
void main() merupakan Fungsi main() yang merupakan fungsi khusus dari dart. Ketika aplikasi dijalankan, maka fungsi ini yang pertama kali dijalankan.
runApp(Tampilan()); adalah perintah untuk menjalankan class Tampilan atau aplikasi Tampilan.

9. komentari semua script pada folder test di file widget_test.dart

10. Jalankan projek tersebut, dengan menekan tombol Play > Run and Debug. Proses build cukup lama(tergantung koneksi internet)

(Catatan : Pastikan bahwa VS Code telah terkoneksi dengan perangkat mobile maupun virtual)

Cara menghubungkan perangkat mobile dengan aplikasi VS Code

Buka Pengaturan > Tentang Ponsel > Informasi Perangkat Lunak
Tekan 7 kali pada Nomor Versi sampai muncul notifikasi bahwa mode pengembangan telah aktif
Pada pengaturan buka Pilihan Pengembangan lalu aktifkan Debugging USB