Pendahuluan

Aplikasi mobile telah menjadi bagian penting dalam kehidupan sehari-hari karena dapat membantu pengguna dalam melakukan berbagai aktivitas secara lebih praktis. Dalam pengembangan aplikasi mobile, salah satu hal yang perlu diperhatikan adalah bagaimana aplikasi dapat menerima dan mengolah input dari pengguna. Input menjadi salah satu dasar dalam interaksi antara pengguna dengan aplikasi, sehingga pemilihan dan penggunaan widget input yang sesuai sangat berpengaruh terhadap kemudahan penggunaan serta kualitas aplikasi yang dikembangkan.

Flutter merupakan framework open-source yang dikembangkan oleh Google untuk membangun aplikasi mobile pada berbagai platform dengan performa yang baik. Flutter menyediakan berbagai widget bawaan yang dapat digunakan untuk membuat tampilan form dan menerima input dari pengguna. Pada praktikum ini, pembahasan berfokus pada penggunaan Input Widgets dan Forms di Flutter, khususnya penggunaan TextFormField, DropdownButtonFormField, serta penerapan validasi input. Validasi tersebut digunakan untuk memastikan data yang dimasukkan oleh pengguna sesuai dengan format dan ketentuan yang telah ditentukan.

Sebagai penerapan dari materi tersebut, dalam praktikum ini akan dibangun sebuah aplikasi sederhana bernama Expense Tracker yang digunakan untuk mencatat transaksi keuangan. Aplikasi ini memiliki form input yang terdiri dari beberapa bagian, seperti judul transaksi, nominal uang, dan kategori pengeluaran. Melalui praktikum ini, mahasiswa diharapkan dapat memahami penggunaan input widgets, penerapan form validation, serta konsep state management pada Flutter sehingga dapat mengembangkan aplikasi yang mampu menerima dan mengelola data dari pengguna dengan baik.

Tujuan Praktikum

Praktikum ini bertujuan untuk:

• Menangkap teks dari pengguna via controller.
• Menerapkan widget dropdown statis.
• Validasi input untuk mencegah data kosong atau format salah.

Langkah Praktikum

1. Buat file baru dengan nama add_transaction_screen.dart

Buat file baru dengan nama add_transaction_screen.dart pada folder lib. Berikut struktur yang akan terbentuk dari folder lib yang dibuat. Dapat dilihat jika terdapat 2 file yang diantaranya ada add_transaction_screen.dart dan juga main.dart.

Gambar 1: Struktur folder lib

2. Persiapan State & Controller

Pada bagian ini, kita menggunakan GlobalKey untuk memicu validasi agar mencegah data yang tidak sesuai format masuk sebelum disimpan ke dalam sistem. Selain itu, pada bagian ini, Controller juga digunakan untuk judul dan nominal.

Gambar 2: Persiapan State & Controller

3. Membuat Kolom Input (TextFormField)

Pada bagian ini, kita membungkus semua kolom dengan menggunakan widget Form dan menghubungkan kunci controller masing-masing dan menggunakan keyboardType: TextInputType.number khusus nominal.

Gambar 3: Kolom Input dengan TextFormField

4. Dropdown & Tombol Simpan

DropdownButtonFormField digunakan untuk pilihan kategori dan tombol untuk mengeksekusi validasi secara keseluruhan.

Gambar 4: Dropdown dan Tombol Simpan

5. Hasil Akhir: Mockup Formulir

Berikut merupakan demonstrasi dari kode program yang telah dibuat.

Gambar 5: Tampilan awal form transaksi

Gambar di atas merupakan tampilan awal dari kode program yang telah dibuat di mana, kode program di atas menampilkan input untuk user menambahkan data transaksi baru yang di antaranya ada judul transaksi, nominal transaksi dan kategori transaksi dengan format pilihan.

Gambar 6: Form dengan data fiktif

Gambar di atas merupakan gambar yang sama seperti sebelumnya, namun pada gambar ini, data transaksi telah diisi dengan data fiktif sementara sebagai bahan uji coba.

Gambar 7: Notifikasi data tersimpan

Gambar di atas merupakan tampilan ketika tombol simpan transaksi ditekan, maka akan muncul notifikasi pada bagian bawah yang menyatakan jika data transaksi yang telah dimasukkan sebelumnya telah disimpan.

Latihan Praktikum

1. Menambahkan Controller untuk Tanggal

Pada bagian deklarasi controller, ditambahkan _dateController untuk menyimpan nilai tanggal yang dipilih melalui DatePicker. Sebelumnya hanya terdapat controller untuk judul dan nominal transaksi.

Penambahan _dateController diperlukan agar tanggal yang dipilih dapat ditampilkan pada TextFormField dan digunakan kembali ketika data transaksi disimpan.

Gambar 8: Menambahkan Date Controller

2. Menambahkan dispose() untuk Controller Tanggal

Pada method dispose(), ditambahkan perintah untuk menghapus _dateController ketika halaman sudah tidak digunakan.

Sebelumnya hanya _titleController dan _amountController yang dihapus. Penambahan _dateController.dispose() dilakukan agar resource yang digunakan oleh controller tanggal dapat dilepaskan dengan baik.

Gambar 9: Method dispose()

3. Menambahkan Input Tanggal Transaksi

Setelah input kategori dan sebelum tombol Simpan Transaksi, ditambahkan TextFormField baru untuk tanggal transaksi.

Input ini menggunakan _dateController dan readOnly: true, sehingga pengguna tidak mengetik tanggal secara langsung. Format yang ditampilkan pada input adalah DD/MM/YYYY dan terdapat ikon kalender sebagai penanda bahwa input digunakan untuk memilih tanggal.

Gambar 10: Input Tanggal Transaksi

4. Menambahkan Tombol Plus dan showDatePicker

Pada input tanggal ditambahkan tombol add_circle melalui suffixIcon. Tombol tersebut digunakan untuk membuka kalender dengan fungsi showDatePicker().

Ketika tombol plus ditekan, showDatePicker() akan menampilkan kalender. initialDate menggunakan tanggal hari ini, sedangkan tanggal yang dapat dipilih dibatasi mulai tahun 2000 sampai tanggal hari ini.

Gambar 11: Implementasi showDatePicker()

5. Membuat Format Tanggal Menjadi DD/MM/YY

Setelah pengguna memilih tanggal, tanggal tersebut diubah menjadi format DD/MM/YYYY sebelum ditampilkan pada input.

Kode tersebut mengambil nilai hari, bulan, dan tahun dari pickedDate. Fungsi padLeft(2, '0') digunakan agar angka hari dan bulan selalu terdiri dari dua digit, misalnya 05/09/2026 bukan 5/9/2026. Setelah itu, hasilnya dimasukkan ke _dateController.

Gambar 12: Format Tanggal DD/MM/YYYY

6. Menambahkan Validasi Wajib Diisi

Pada input tanggal juga ditambahkan validasi untuk memastikan pengguna sudah memilih tanggal sebelum menyimpan transaksi.

Validasi ini membuat tanggal menjadi input wajib. Jika pengguna langsung menekan tombol Simpan Transaksi tanpa memilih tanggal, form tidak akan dianggap valid dan akan menampilkan pesan "Tanggal wajib diisi".

Gambar 13: Validasi Tanggal Wajib Diisi

7. Menambahkan Tanggal pada Pesan Snackbar

Bagian SnackBar juga mengalami perubahan. Sebelumnya hanya judul dan nominal yang ditampilkan, sedangkan setelah perubahan tanggal transaksi ikut ditampilkan.

Dengan perubahan tersebut, ketika transaksi berhasil disimpan, informasi yang muncul pada SnackBar mencakup judul transaksi, nominal transaksi, dan tanggal transaksi.

Gambar 14: SnackBar dengan Tanggal

8. Demonstrasi Output

Berikut output ketika kode program tersebut dijalankan.

Gambar 15: Form dengan Input Tanggal

Terlihat jika input Tanggal Transaksi telah ditambahkan pada gambar di atas.

Gambar 16: Tampilan DatePicker Calendar

Ketika tombol dengan tanda tambah pada bagian kiri ditekan, akan muncul tampilan kalender seperti ini untuk memilih tanggal transaksi dengan lebih mudah.

Kesimpulan

Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa Flutter menyediakan berbagai Input Widgets yang dapat digunakan untuk menerima dan mengelola data dari pengguna. Pada aplikasi Expense Tracker, digunakan TextFormField untuk judul dan nominal transaksi, DropdownButtonFormField untuk kategori, serta Form dan validator untuk memastikan input wajib diisi sebelum disimpan. Penggunaan TextEditingController juga membantu dalam mengelola nilai yang dimasukkan oleh pengguna.

Pada tahap pengembangan, ditambahkan input Tanggal Transaksi menggunakan TextFormField dan showDatePicker() sehingga pengguna dapat memilih tanggal melalui kalender dan menampilkannya dalam format DD/MM/YYYY. Fitur ini juga dilengkapi validasi agar tanggal wajib diisi. Melalui praktikum ini, dapat dipahami penerapan input widgets, form validation, controller, dan state management dasar dalam membangun aplikasi Flutter yang dapat menerima dan mengelola data pengguna dengan lebih terstruktur.