Tutorial Vibe Coding: Aplikasi Uang Saku (Part 2)

Posted by By asmaul husna 6 Min Read

Mari kita lanjutkan tutorial vibe coding nya, masih dalam langkah codingannya.

jika anda belum membaca tutorial sebelumnya, Silahkan klik disini tutorial vibe coding part-1

LANGKAH 6: Kartu Saldo Pintar & Indikator Harian

Tujuan: Menghadirkan ringkasan saldo bulanan dan memantau apakah penggunaan uang hari ini dalam kondisi aman atau boros.

Penjelasan Poin-Poin:

  1. FittedBox: Memastikan teks nominal saldo otomatis mengecil menyesuaikan lebar layar, mencegah galat garis kuning-hitam (render overflow).
  2. dailyRatio: Menghitung persentase rasio pengeluaran harian dan membatasi nilainya dari 0.0 sampai 1.0 menggunakan .clamp().
  3. LinearProgressIndicator: Batang indikator dinamis yang otomatis berubah menjadi warna merah bila kuota harian habis terlampaui.
  4. Badge Terkendali / Hari Ini Boros: Menampilkan status evaluasi finansial secara otomatis kepada mahasiswa.

LANGKAH 7: Tombol Pintas 1-Tap Kebutuhan Kost

Tujuan: Mempercepat proses pencatatan pengeluaran dengan satu kali ketukan langsung pada kategori yang diinginkan.

Penjelasan Poin-Poin:

  1. ExpenseCategory.values.map(): Melakukan perulangan otomatis terhadap keempat kategori tanpa perlu menulis kode tombol berulang kali (DRY – Don’t Repeat Yourself).
  2. Expanded: Membagi rata lebar tombol kartu agar simetris di layar HP.
  3. InkWell: Menghasilkan efek riak sentuhan (ripple animation) saat tombol ditekan.

LANGKAH 8: Filter Bar Kategori

Tujuan: Menyaring transaksi di daftar riwayat berdasarkan kategori tertentu.

Penjelasan Poin-Poin:

  1. SingleChildScrollView(scrollDirection: Axis.horizontal): Membuat baris filter dapat digeser ke samping secara horizontal bila ukuran layar sempit.
  2. AnimatedContainer: Memberikan transisi perubahan warna tombol secara mulus saat dipilih.
  3. onSelectCategory(null): Menampilkan seluruh transaksi saat chip “Semua” aktif.

LANGKAH 9: Riwayat Transaksi dengan Fitur Geser Hapus (Swipe to Delete)

Tujuan: Menampilkan seluruh riwayat pengeluaran dan memberikan kemudahan menghapus item dengan gestur geser.

Penjelasan Poin-Poin:

  1. Dismissible: Komponen bawaan Flutter yang mendeteksi gestur geser (swipe). Menggeser kartu ke kiri akan menampilkan latar warna merah dengan ikon tempat sampah.
  2. onDismissed: Menghapus data transaksi dari list secara instan berdasarkan ID transaksi.
  3. ListView.separated: Menampilkan daftar transaksi yang efisien dengan pemisah jarak 10 piksel antar item.

LANGKAH 10: Formulir Melayang Catat Cepat (QuickExpenseBottomSheet)

Tujuan: Menyediakan formulir input yang muncul dari bawah layar dengan chip pilihan nominal instan.

Penjelasan Poin-Poin:

  1. MediaQuery.of(context).viewInsets.bottom: Mengangkat form ke atas secara otomatis saat keyboard virtual HP muncul agar form input tidak tertutup keyboard.
  2. quickAmounts: Deretan chip nominal cepat (5rb, 10rb, 15rb, 20rb, 50rb) yang langsung mengisi kolom angka saat ditekan tanpa perlu mengetik angka manual.
  3. TextInputType.number: Memunculkan papan tombol angka (numpad) di layar HP saat kolom nominal diketuk.

LANGKAH 11: Merangkai Seluruh Komponen di Layar Utama (HomeScreen Build Method)

Tujuan: Menyatukan seluruh modul yang sudah dibuat di atas ke dalam satu tampilan terstruktur.

Penjelasan Poin-Poin:

  1. SingleChildScrollView: Membuat seluruh layar dapat di-scroll dari atas ke bawah agar bebas dari render overflow pada HP layar kecil.
  2. FloatingActionButton: Tombol melayang berbentuk oval bersudut 12px di pojok kanan bawah untuk membuka modal catat cepat kapan saja.

FASE 4: Memasang & Membuka Aplikasi di Handphone Android

Sekarang file APK sudah siap dipindahkan dan dipasang di HP Android Anda.

1. Mengirim File APK ke Handphone

Pilih salah satu cara termudah berikut:

  • Lewat WhatsApp Web: Kirim file app-release.apk ke nomor WhatsApp sendiri / grup pribadi, lalu unduh lewat WhatsApp di HP.
  • Lewat Kabel USB: Sambungkan HP ke laptop dengan kabel data, lalu copy-paste file APK ke folder Download di memori internal HP.
  • Lewat Google Drive: Upload file APK ke Google Drive laptop, lalu unduh melalui aplikasi Google Drive di HP.
2. Memasang (Install) APK di HP
  1. Buka aplikasi File Manager (Pengelola File) di HP Android Anda, lalu buka folder Download.
  2. Ketuk file app-release.apk.
  3. Mengizinkan Sumber Tidak Dikenal:
    • Karena aplikasi ini dibuat sendiri (bukan diunduh dari Google Play Store), HP Android akan menampilkan peringatan keamanan:
      “Demi keamanan, ponsel Anda tidak diizinkan menginstal aplikasi tidak dikenal dari sumber ini.”
    • Ketuk tombol Setelan / Pengaturan (Settings).
    • Aktifkan sakelar / centang: “Izinkan dari sumber ini” (Allow from this source).
  4. Kembali ke layar sebelumnya, lalu ketuk tombol Instal.
  5. Tunggu 5-10 detik hingga proses pemasangan selesai, lalu ketuk Selesai atau Buka.
3. Membuka & Mencoba Aplikasi di Layar HP
  1. Cari ikon aplikasi UangSaku Kost di menu layar utama (Homescreen) HP Anda.
  2. Ketuk untuk membuka aplikasi:
    • Layar 1 (Splash Screen): Tampilan pembuka bergradasi Baby Pink & Baby Blue akan menyapa dengan logo Dompet Uang Saku pastel yang memantul lembut selama 2 detik.
    • Layar 2 (Dashboard Utama): Muncul sapaan “Halo, Asmaul Husna 👋 – Sistem Informasi”, kartu sisa saldo bulanan, dan indikator jatah harian.
  3. Uji Coba Fitur:
    • Ketuk tombol cepat Makan ➔ masukkan nominal (misal: Rp 18.000) ➔ ketuk Simpan.
    • Saldo bulanan dan jatah harian Anda akan otomatis berkurang secara real-time, dan pengeluaran baru akan langsung tercatat di daftar riwayat! 🎉