flutterprojectcounter-appPemula3 mnt baca

Membuat Project Flutter Pertamamu

Generate project baru, pahami struktur foldernya, dan jalankan aplikasi counter bawaan di emulator sampai hot reload.

Membuat project baru

Buka terminal di folder kerja favoritmu, lalu jalankan:

bash
flutter create halo_flutter
cd halo_flutter

Nama project harus huruf kecil dengan underscore, tanpa spasi. Perintah ini men-generate struktur project lengkap: kode Dart, konfigurasi Android, iOS, web, dan file analisis.

Struktur folder penting

Ada beberapa folder dan file yang wajib kamu kenal:

  • lib/main.dart: pintu masuk aplikasi, semua kode Dart-mu tinggal di lib/.
  • pubspec.yaml: seperti package.json, berisi nama project, dependensi, dan daftar asset.
  • android/, ios/, web/: konfigurasi native per platform, biasanya jarang disentuh di awal.
  • test/: folder untuk unit test dan widget test.

Menjalankan aplikasi

Pastikan emulator berjalan atau HP tersambung (cek dengan flutter devices). Lalu jalankan:

bash
flutter run

Kamu akan melihat aplikasi counter bawaan: angka di tengah layar dan tombol tambah di pojok kanan bawah. Coba tekan tombolnya, angkanya bertambah.

Merasakan hot reload

Sekarang buka lib/main.dart, ubah teks 'You have pushed the button this many times:' menjadi kalimatmu sendiri, lalu simpan (Ctrl+S). Perubahan langsung muncul di emulator dalam hitungan detik tanpa restart. Itulah hot reload, fitur yang membuat eksperimen UI terasa instan.

Coba juga hot restart dengan menekan R besar di terminal. Bedanya: hot reload menyuntikkan perubahan kode ke VM yang sedang jalan (state tetap), sedangkan hot restart me-restart aplikasi dari awal (state hilang).

Catatan teknis: Hot reload tidak selalu bisa menangani semua perubahan, misalnya perubahan di fungsi main() atau inisialisasi static. Kalau UI tidak berubah setelah save, jangan panik, lakukan hot restart (R) atau stop lalu flutter run ulang. Itu bukan bug di kodemu.