Pada artikel ini akan dijelaskan cara membuat aplikasi Flutter menggunakan template sekaligus kita akan mencoba fitur “hot reload” setelah kamu membuat perubahan pada kodinganmu.

Pilih dulu IDE yang akan kamu gunakan untuk menjalankan Flutter, aku menggunakan Visual Studio Code.


Persiapan


Untuk persiapannya kita akan membuat project bernama myapp yang memuat demo aplikasi yang simpel:

  • Jalankan View > Command Palette.

“Menu List View”
Menu List of View

  • Ketik “flutter”, lalu pilih Flutter: New Project.

“Auto Run VS Code”
Auto Run VS Code

  • Masukkan nama project, seperti myapp, lalu Enter.
  • Buat atau pilih direktori utama untuk project baru ini.
  • Silakan tunggu hingga main.dart muncul

“main.dart view”
main.dart view

Tips:

  • Kode utama terletak pada lib/main.dart, lihat comment yang telah ada sebagai panduan.
  • Mungkin saja dalam prosesnya kamu akan diminta untuk mengupdate flutter atau dart (Extension).

Jalankan Aplikasi


  • Lihat status bar VS Code (Bagian bawah window):

“VS Code Status Bar”
VS Code Status Bar

  • Pastikan ada device yang terhubung.

  • Tekan F5 atau ketik flutter run pada terminal untuk menjalankan aplikasi.

  • Tunggu aplikasi berjalan (Semua proses terlihat pada Debug Console)

  • Jika sudah selesai, maka akan terlihat demo aplikasi pada device mu.

“First Demo Application”
First Demo Application


Hot Reload


Flutter menawarkan Stateful Hot Reload, sebuah kemampuan untuk mereload saat ada perubahan pada code.

  • Buka lib/main.dart

  • Ubah tulisan:

    ‘You have pushed the button this many times’

  • Menjadi tulisan:

    ‘You have clicked the button this many times’

“Example Code”
Example Code

Jangan hentikan aplikasi mu, biarkan tetap berjalan. Perubahan akan langsung terlihat

“Demo Application”
Demo Application