Praktikum App Mobile 3

Form Transaksi Lanjutan & Validasi Data

Kode Program Transaksi

Inisialisasi Controller Form

Deklarasi dua alat kontrol teks (`TextEditingController`) untuk menangkap input data judul dan nominal transaksi secara real-time[cite: 6].

Inisialisasi Controller Form
Pengaturan Data Kategori

Mendefinisikan variabel string kategori terpilih serta membuat *list* yang memuat opsi dropdown kategori seperti makanan, transportasi, hiburan, dan lainnya[cite: 6].

Pengaturan Data Kategori
Pembersihan Memori (Dispose)

Memanggil metode `dispose()` guna membersihkan sisa data dari controller sesaat setelah halaman ditutup agar memori perangkat tidak terbebani (*memory leak*)[cite: 6].

Pembersihan Memori Dispose
Desain AppBar Transaksi

Membangun kerangka dasar Scaffold yang dihiasi AppBar berwarna `deepPurple` elegan dengan judul halaman "catat transaksi baru"[cite: 6].

Desain AppBar Transaksi
Struktur Penampung Form

Implementasi area bergulir (`SingleChildScrollView`) yang dipadukan dengan widget Form dan disusun sejajar merata ke samping menggunakan `CrossAxisAlignment.stretch`[cite: 6].

Struktur Penampung Form
Validasi Judul Transaksi

Pembuatan kolom input untuk judul transaksi lengkap dengan garis batas tepi (border) dan fungsi validasi agar pengguna tidak mengirimkan teks kosong[cite: 6].

Validasi Judul Transaksi
Validasi Nominal Angka

Kolom pengisian uang yang secara otomatis menampilkan papan ketik angka (`TextInputType.number`) dengan validasi keamanan ganda untuk memastikan format yang dimasukkan adalah bilangan bulat[cite: 6].

Validasi Nominal Angka
Dropdown Menu Kategori

Penerapan `DropdownButtonFormField` untuk memudahkan pemilihan kategori dari opsi yang telah disiapkan sebelumnya, dan menyimpan nilainya setiap kali ada perubahan[cite: 6].

Dropdown Menu Kategori
Tombol Simpan & Logika Snackbar

Sistem akan memverifikasi keseluruhan kondisi form ketika tombol ini ditekan. Jika validasi terpenuhi, aplikasi akan menampilkan pop-up sukses hijau (Snackbar)[cite: 6].

Tombol Simpan Logika Snackbar

Latihan: Implementasi Tanggal

Deklarasi Controller Tanggal

Menyiapkan satu lagi controller khusus yang dialokasikan untuk mendeteksi dan menangkap input jadwal transaksi pengguna[cite: 6].

Deklarasi Controller Tanggal
Pemilih Tanggal Otomatis (Date Picker)

Kolom input canggih yang dilengkapi ikon tambah (add) pada ujungnya untuk memicu jendela kalender pop-up, dipadukan juga dengan proteksi wajib isi[cite: 6].

Pemilih Tanggal Otomatis

Hasil Visualisasi Antarmuka

Antarmuka Bersih Formulir

Potret kondisi awal formulir yang rapi saat aplikasi baru dibuka oleh pengguna, di mana belum ada kolom yang diintervensi[cite: 6].

Antarmuka Bersih Formulir
Simulasi Error Validasi Sistem

Tangkapan layar yang memperlihatkan respon cepat sistem menolak penyimpanan data jika masih terdapat baris merah karena ada yang belum terisi[cite: 6].

Simulasi Error Validasi Sistem
Keberhasilan Penyimpanan Form

Tampilan akhir ketika seluruh syarat input sudah terpenuhi. Sebuah notifikasi Snackbar muncul membawa kabar bahwa transaksi baru berhasil dicatat secara resmi[cite: 6].

Keberhasilan Penyimpanan Form