Laporan Praktikum: Aplikasi Mobile Widgets, Menangkap Data Dropdown dan Validasi

A. PENDAHULUAN

Antarmuka pengumpulan data atau formulir merupakan elemen esensial dalam pengembangan aplikasi mobile. Praktikum kali ini difokuskan pada pembelajaran implementasi form di Flutter menggunakan pilar utama seperti widget Form, TextFormField, dan TextController. Studi kasus yang dikerjakan berupa pembuatan halaman "Catat Transaksi Baru" untuk aplikasi Expense Tracker, di mana data masukan dari pengguna harus ditangkap dan divalidasi kebenarannya sebelum diproses oleh sistem.

B. LANGKAH KERJA

1. Persiapan Entry Point

Langkah pertama yang dilakukan adalah mengatur file main.dart. Widget MaterialApp digunakan untuk mendefinisikan tema aplikasi dengan mengatur primarySwatch ke Colors.deepPurple sesuai instruksi. Aplikasi kemudian dikonfigurasi agar langsung memuat halaman AddTransactionScreen saat pertama kali dijalankan.

2. Inisialisasi State dan Controller

Pada file add_transaction_screen.dart, penggunaan StatefulWidget diterapkan karena isi formulir akan berubah secara dinamis seiring interaksi pengguna dengan keyboard maupun dropdown. Beberapa properti yang disiapkan antara lain

GlobalKey: Berfungsi sebagai kunci utama form untuk mengontrol dan mengeksekusi semua validasi sekaligus.

TextEditingController: Disiapkan untuk menangkap teks pada input judul dan nominal. Agar aplikasi berjalan optimal dan tidak mengalami memory leak, seluruh controller ini wajib dibersihkan di dalam blok dispose().

Variabel State Dropdown: Menyiapkan variabel _selectedCategory dengan nilai awal "Makanan" untuk menampung pilihan kategori.

3. Implementasi Widget Input

Seluruh struktur input dibungkus menggunakan widget Form yang disambungkan ke _formKey

Judul Transaksi: Memakai TextFormField standar dengan fungsi validator untuk memastikan kolom tidak dibiarkan kosong oleh pengguna.

Nominal Transaksi: Kolom ini diatur menggunakan keyboardType: TextInputType.number agar memunculkan papan ketik angka. Validasi di sini dibuat lebih ketat; selain mengecek kekosongan nilai, fungsi int.tryParse digunakan untuk memastikan karakter yang diketik benar-benar angka bulat yang valid.

Kategori Dropdown: Memakai DropdownButtonFormField. Daftar kategori dipetakan menjadi DropdownMenuItem, dan saat item baru dipilih, nilai state akan langsung diperbarui lewat setState()

4. Eksekusi Form dan Validasi

Untuk mengeksekusi form, digunakan ElevatedButton sebagai tombol simpan. Di dalam aksi onPressed, fungsi _formKey.currentState!.validate() dipanggil untuk menjalankan pemeriksaan di semua kolom input. Jika seluruh validasi terpenuhi, sistem akan memunculkan pop-up berupa SnackBar hijau yang menampilkan informasi judul dan nominal transaksi yang baru saja dicatat.

D. Penyelesaian Tugas

Fungsi Tanggal, Dibuat fungsi _selectDate untuk memunculkan kalender dan memformat tanggal terpilih.Ditambahkan TextFormField berstatus read-only (agar keyboard tidak muncul) yang dihubungkan dengan onTap: () => _selectDate(context), dan pengecekan wajib isi di dalam validator kolom tersebut.

Keseluruhan kode sumber dan aset untuk praktikum Modul III ini telah diunggah dan dapat diakses secara publik melalui Repositori GitHub berikut.