Input Widgets & Forms Menangkap Data, Dropdown, dan Validasi (Studi Kasus)

Setelah controller digunakan, controller perlu dibersihkan ketika halaman sudah tidak digunakan. Flutter menyediakan method dispose() untuk melakukan proses tersebut.

Method dispose() dipanggil ketika widget sudah dihapus dari widget tree. Pemanggilan dispose() pada masing-masing controller bertujuan melepaskan resource yang digunakan sehingga tidak terjadi penggunaan memori yang tidak diperlukan. Modul juga menjelaskan bahwa controller perlu dibersihkan ketika halaman ditutup untuk mencegah memory leak.

Setelah state siap, langkah berikutnya adalah membuat tampilan utama menggunakan Scaffold.

Scaffold digunakan sebagai struktur utama halaman Flutter. Pada bagian AppBar, ditampilkan judul “Catat Transaksi Baru” dengan warna latar ungu dan teks putih. Bagian body menggunakan SingleChildScrollView agar form tetap dapat digulir ketika keyboard muncul dan ukuran layar menjadi terbatas. Selanjutnya seluruh input dibungkus dengan widget Form dan dihubungkan dengan _formKey, sehingga setiap field di dalamnya dapat divalidasi secara bersamaan.

Input pertama digunakan untuk memasukkan judul transaksi.

Widget TextFormField digunakan karena selain menerima teks, widget ini juga memiliki fasilitas validasi melalui property validator. Controller _titleController digunakan untuk mengambil nilai yang dimasukkan pengguna. InputDecoration memberikan tampilan berupa label, garis tepi, dan ikon. Pada bagian validator, program memeriksa apakah nilai yang dimasukkan kosong. Jika kosong, validator mengembalikan pesan error sehingga Flutter menampilkan pesan tersebut pada form. Jika data sudah benar, validator mengembalikan null yang berarti tidak terdapat kesalahan.

Input kedua digunakan untuk memasukkan jumlah nominal transaksi.

Pada input nominal digunakan TextInputType.number sehingga keyboard yang ditampilkan lebih sesuai untuk memasukkan angka. Selain memeriksa apakah input kosong, validator juga menggunakan int.tryParse() untuk memastikan bahwa nilai yang diberikan benar-benar dapat dikonversi menjadi bilangan bulat. Jika proses konversi gagal, pengguna akan mendapatkan pesan bahwa nominal harus berupa angka yang valid. Dengan demikian, validasi tidak hanya memastikan data terisi, tetapi juga memastikan format data sesuai dengan kebutuhan.

Selanjutnya dibuat dropdown untuk memilih kategori transaksi.

DropdownButtonFormField digunakan untuk membuat pilihan kategori yang terintegrasi dengan form. Nilai awal dropdown diambil dari _selectedCategory, sedangkan items dibuat berdasarkan isi list _categories. Method map() digunakan untuk mengubah setiap data kategori menjadi DropdownMenuItem. Ketika pengguna memilih kategori lain, method onChanged dijalankan dan setState() digunakan agar nilai _selectedCategory diperbarui pada tampilan. Ada empat kategori, yaitu Makanan, Transportasi, Hiburan, dan Lainnya.

Bagian terakhir dari form adalah tombol untuk menyimpan transaksi sekaligus menjalankan validasi.

ElevatedButton digunakan sebagai tombol utama untuk menyimpan data. Pada onPressed, method _formKey.currentState!.validate() menjalankan seluruh fungsi validator yang terdapat di dalam Form. Jika seluruh input valid, program akan menampilkan SnackBar sebagai notifikasi bahwa transaksi berhasil disimpan. Data judul dan nominal diambil dari masing-masing controller dan ditampilkan di dalam pesan. Jika terdapat input yang tidak valid, proses penyimpanan tidak dilanjutkan dan pesan error akan ditampilkan pada field yang bermasalah.

Setelah halaman form selesai dibuat, langkah berikutnya adalah menghubungkan halaman tersebut dengan file utama main.dart agar dapat diakses pengguna.

Pada bagian awal, file add_transaction_screen.dart diimpor agar class AddTransactionScreen dapat digunakan. runApp() menjalankan aplikasi melalui class MyApp. MaterialApp digunakan sebagai konfigurasi utama aplikasi, termasuk judul dan tema warna. Sementara itu, property home diarahkan ke AddTransactionScreen, sehingga halaman formulir transaksi langsung ditampilkan ketika aplikasi dijalankan.

Setelah seluruh kode dibuat, aplikasi dijalankan melalui emulator atau device. Pengujian dilakukan dengan mencoba mengisi judul transaksi, nominal, dan memilih kategori. Kemudian tombol Simpan Transaksi ditekan untuk melihat apakah validasi berjalan sesuai dengan yang diharapkan. Jika seluruh data sesuai, aplikasi menampilkan SnackBar yang menunjukkan data transaksi yang berhasil diproses.

Pengujian juga dilakukan dengan sengaja membiarkan judul atau nominal kosong. Pada kondisi tersebut, validator akan menampilkan pesan kesalahan dan proses penyimpanan tidak dijalankan.

Selain itu, pengujian juga dilakukan dengan memasukkan nilai nominal yang bukan angka. Validator akan menampilkan pesan kesalahan bahwa nominal harus berupa angka yang valid.

Dengan demikian, seluruh mekanisme input, validasi, dan penyimpanan data dapat berjalan sesuai dengan yang diharapkan.