A. Pendahuluan
Pengembangan aplikasi seluler dengan Flutter sering kali membutuhkan interaksi pengguna melalui pengisian formulir. Dalam praktikum ini, fokus utama adalah pemahaman dan penerapan komponen Input Widgets & Forms. Beberapa komponen yang dibahas meliputi penggunaan widget Form bersama GlobalKey sebagai wadah utama untuk mengontrol dan memvalidasi banyak input sekaligus, serta TextFormField sebagai kolom teks utama yang mendukung validasi terintegrasi. Selain itu, TextEditingController juga diterapkan sebagai pengendali untuk membaca dan mengelola data teks yang diketik oleh pengguna.
Praktikum ini merancang antarmuka formulir "Catat Transaksi Baru" untuk sebuah aplikasi Expense Tracker. Proses perancangan antarmuka melibatkan pembuatan input untuk judul transaksi, input nominal yang dikhususkan untuk kibor angka, serta pemilihan kategori menggunakan DropdownButtonFormField. Lalu, praktikum ini juga mengeksplorasi penambahan interaksi tingkat lanjut pada bagian tugas, yaitu input tanggal transaksi berformat DD/MM/YYYY yang memanfaatkan fungsi showDatePicker. Seluruh elemen input tersebut dilengkapi dengan sistem validasi untuk mencegah masuknya data kosong atau format angka yang tidak sesuai sebelum data diproses dan ditampilkan melalui pop-up SnackBar.
B. Tujuan
Tujuan dari praktikum ini adalah:
- Menangkap dan mengelola data teks yang diinputkan oleh pengguna menggunakan TextEditingController.
- Menerapkan dan mengonfigurasi widget dropdown statis menggunakan DropdownButtonFormField untuk pemilihan kategori transaksi.
- Melakukan validasi input pada formulir untuk mencegah penyimpanan data yang kosong atau memiliki format yang salah, seperti format huruf pada kolom angka.
- Mengimplementasikan fungsi showDatePicker untuk memunculkan kalender pop-up yang berguna untuk memudahkan pengguna memilih input tanggal transaksi dengan format DD/MM/YYYY.
- Menggunakan widget Form beserta GlobalKey sebagai wadah utama untuk memvalidasi dan mengontrol seluruh komponen input secara bersamaan dalam satu waktu.
C. Langkah-Langkah
1. Buat file baru dengan nama add_transaction_screen.dart
2. Persiapan State & Controller.
Kode ini merupakan inisialisasi variabel dan state dasar pada class _AddTransactionScreenState, di mana _formKey digunakan sebagai kunci identifikasi unik untuk memvalidasi seluruh elemen form, dua objek TextEditingController disiapkan untuk mengambil teks yang diketikkan pada kolom judul dan nominal, serta atribut _selectedCategory diisi dengan nilai awal 'Makanan' untuk menyimpan pilihan kategori pada dropdown.
3. Membuat Kolom Input (TextFormField).
Kode ini menyusun dua bidang input menggunakan TextFormField di dalam widget Form yang terikat pada _formKey, di mana input pertama digunakan untuk menangkap judul transaksi dengan validasi teks wajib diisi, sementara input kedua dikhususkan untuk masukan nominal menggunakan jenis kibor angka (TextInputType.number) serta memiliki dua tingkat validasi untuk memastikan nilainya tidak kosong dan berformat angka yang valid.
4. Dropdown & Tombol Simpan.
Kode ini menambahkan menu pilihan kategori menggunakan widget DropdownButtonFormField yang memperbarui nilai variabel _selectedCategory ketika pengguna memilih salah satu opsi, serta menyediakan tombol ElevatedButton yang berfungsi untuk memicu validasi seluruh field formulir melalui _formKey.currentState!.validate() dan menampilkan SnackBar berisi pesan konfirmasi apabila seluruh data input sudah valid.
5. Jika telah selesai, maka akan tampil output seperti ini.
Latihan/Tugas
Input Tanggal.
Tambahkan satu input baru sebelum tombol Simpan untuk mengisi Tanggal Transaksi.
- Bisa menggunakan TextFormField biasa (format teks DD/MM/YYYY).
- Tombol plus: gunakan fungsi showDatePicker.
- Berikan validasi wajib diisi!.
6. Menambahkan Controller Baru.
Di bagian awal state, dideklarasikan _dateController untuk menyimpan data teks tanggal.
7. Membuat Fungsi Pemilih Tanggal.
Tambahkan fungsi asinkron _selectDate yang memanggil showDatePicker, lalu memformat hasilnya ke dalam bentuk DD/MM/YYYY sebelum dimasukkan ke dalam controller.
8. Membersihkan Memori (Dispose).
Memastikan _dateController ikut dihapus saat halaman ditutup untuk mencegah kebocoran memori.
9. Menambahkan TextFormField Tanggal.
Sisipkan widget input baru sebelum tombol Simpan. Properti readOnly: true dipasang agar keyboard tidak muncul, dan onTap dihubungkan ke fungsi _selectDate untuk memunculkan kalender. Validasi wajib diisi juga diletakkan di sini.
10. Memperbarui Pesan SnackBar (Modifikasi).
Tambahkan variabel _dateController.text pada pesan notifikasi sukses agar tanggal yang diinput ikut ditampilkan.
11. Jika sudah selesai, maka akan tampil output seperti ini.
D. Kesimpulan
Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa pembuatan formulir interaktif pada Flutter dapat dibangun secara terstruktur dengan memanfaatkan widget Form dan TextFormField. Penggunaan GlobalKey<FormState> terbukti sangat efektif untuk mengontrol dan memicu validasi semua field input secara serentak hanya dengan satu perintah dari tombol simpan. Sementara itu, proses ekstraksi data dari kolom input dapat dikelola dengan mudah tanpa perlu melacak setiap perubahan state secara manual berkat penyematan TextEditingController.
Selain itu, praktik validasi formulir merupakan langkah untuk menjaga integritas data pada aplikasi, seperti memastikan kolom input tidak dibiarkan kosong dan membatasi input nominal agar murni berisi karakter angka yang bisa dibaca menggunakan fungsi int.tryParse. Modifikasi tambahan dengan fitur showDatePicker pada bagian Latihan/Tugas juga menunjukkan fleksibilitas Flutter dalam menangani berbagai tipe input yang intuitif bagi pengguna. Hasil dari praktikum ini adalah sebuah halaman pencatatan transaksi yang lengkap, aman dari kesalahan input format data, dan siap dikembangkan lebih lanjut ke tahap integrasi basis data.
Lihat Repository GitHub