Pendahuluan
1.1. Tujuan Praktikum
Praktikum ini bertujuan untuk memahami penggunaan input widgets dan form pada Flutter. Input widgets digunakan untuk menerima data yang diberikan oleh pengguna melalui aplikasi.
Praktikum juga bertujuan untuk memahami penggunaan
TextEditingController untuk menangkap data
dari input pengguna, menggunakan dropdown untuk memilih
kategori, serta menerapkan validasi agar data yang
dimasukkan sesuai dengan ketentuan.
1.2. Dasar Teori
1.2.1. Input Widgets
Input widgets merupakan widget yang digunakan untuk menerima data atau masukan dari pengguna. Pada praktikum ini input digunakan untuk memasukkan judul dan nominal transaksi.
1.2.2. StatefulWidget
StatefulWidget digunakan karena form transaksi memiliki data yang dapat berubah selama aplikasi berjalan. Perubahan tersebut dapat terjadi ketika pengguna mengisi input atau memilih kategori.
1.2.3. TextEditingController
TextEditingController digunakan untuk mengontrol dan mengambil nilai yang dimasukkan pengguna pada TextFormField. Pada praktikum ini digunakan controller untuk input judul dan nominal transaksi.
1.2.4. TextFormField
TextFormField digunakan untuk membuat field input yang dapat dilengkapi dengan validator. Widget ini digunakan untuk menerima judul transaksi dan nominal transaksi.
1.2.5. Form dan GlobalKey
Form digunakan untuk mengelompokkan beberapa field input. GlobalKey<FormState> digunakan untuk mengakses state dari Form sehingga seluruh validasi dapat dijalankan ketika tombol simpan ditekan.
1.2.6. DropdownButtonFormField
DropdownButtonFormField digunakan untuk memberikan pilihan kategori transaksi. Pada praktikum ini kategori yang tersedia adalah Makanan, Transportasi, Hiburan, dan Lainnya.
1.2.7. Validasi Input
Validasi digunakan untuk memastikan data yang dimasukkan pengguna sesuai dengan aturan yang ditentukan. Jika data valid, validator mengembalikan nilai null. Jika tidak valid, validator mengembalikan pesan kesalahan.
1.2.8. SnackBar
SnackBar digunakan untuk memberikan informasi singkat kepada pengguna. Pada praktikum ini SnackBar digunakan untuk menampilkan informasi ketika transaksi berhasil disimpan.
Alat dan Bahan
2.1. Alat
- Laptop atau komputer.
- Flutter SDK.
- Android Studio atau Visual Studio Code.
- Android Emulator atau perangkat Android.
- Bahasa pemrograman Dart.
- Carbon untuk membuat screenshot source code.
2.2. Bahan
- Modul Praktikum Aplikasi Mobile Flutter.
-
Source code Flutter pada file
add_transaction_screen.dart. -
File
main.dartuntuk menjalankan halaman AddTransactionScreen.
Langkah Kerja
3.1. Membuat AddTransactionScreen
Langkah pertama adalah membuat halaman
AddTransactionScreen. Halaman ini
digunakan sebagai halaman formulir untuk mencatat
transaksi baru.
Karena terdapat data yang dapat berubah ketika
pengguna melakukan input dan memilih kategori,
halaman dibuat menggunakan
StatefulWidget.
3.2. Membuat Form dan Controller
Selanjutnya dibuat
GlobalKey<FormState> untuk
mengontrol form. Dua buah
TextEditingController digunakan untuk
menangkap input judul dan nominal transaksi.
Controller digunakan agar nilai yang dimasukkan pengguna dapat diakses oleh program ketika proses validasi dan penyimpanan dilakukan.
3.3. Membuat Input Judul Transaksi
Input judul transaksi dibuat menggunakan
TextFormField. Field tersebut
menggunakan _titleController untuk
mengambil data yang dimasukkan oleh pengguna.
Validator digunakan untuk memastikan judul transaksi tidak kosong. Jika pengguna tidak memasukkan judul, sistem akan menampilkan pesan Judul transaksi tidak boleh kosong.
3.4. Membuat Input Nominal
Input nominal transaksi dibuat menggunakan
TextFormField dengan
TextInputType.number sehingga keyboard
angka digunakan ketika pengguna memasukkan nominal.
Validasi dilakukan untuk memastikan nominal tidak kosong dan data yang dimasukkan merupakan angka bulat yang valid.
3.5. Membuat Dropdown Kategori
Dropdown kategori dibuat menggunakan
DropdownButtonFormField<String>.
Dropdown digunakan agar pengguna dapat memilih
kategori transaksi yang telah tersedia.
Kategori yang digunakan terdiri dari Makanan,
Transportasi, Hiburan, dan Lainnya. Nilai kategori
yang dipilih disimpan pada variabel
_selectedCategory.
3.6. Membuat Tombol Simpan
Tombol Simpan Transaksi digunakan untuk menjalankan proses validasi terhadap seluruh input pada form.
Proses validasi dilakukan menggunakan
_formKey.currentState!.validate().
Apabila seluruh input valid, aplikasi akan
menampilkan SnackBar yang berisi informasi transaksi.
3.7. Menghubungkan dengan main.dart
Setelah halaman transaksi selesai dibuat, file
add_transaction_screen.dart dihubungkan
dengan file main.dart.
File AddTransactionScreen kemudian digunakan sebagai
halaman utama aplikasi melalui properti
home pada MaterialApp.
Hasil dan Pembahasan
Setelah program dijalankan menggunakan Android Studio, aplikasi menampilkan halaman formulir untuk mencatat transaksi. Formulir tersebut terdiri dari input judul transaksi, nominal, kategori, dan tombol untuk menyimpan transaksi.
Hasil Praktikum
Aplikasi berhasil dijalankan dan menampilkan form input transaksi sesuai dengan rancangan pada modul Praktikum III. Pengguna dapat memasukkan judul transaksi dan nominal, memilih kategori melalui dropdown, serta melakukan validasi sebelum data disimpan.
Gambar 1. Tampilan form input transaksi pada aplikasi Flutter
Berdasarkan hasil pengujian, halaman utama aplikasi menampilkan form yang terdiri dari beberapa komponen input. Pada bagian judul transaksi, pengguna dapat memasukkan nama atau keterangan transaksi. Sementara itu, bagian nominal digunakan untuk memasukkan jumlah transaksi dalam bentuk angka.
Gambar 2. Tampilan dropdown kategori transaksi
Pada bagian kategori, pengguna dapat memilih kategori transaksi yang telah disediakan. Kategori yang tersedia terdiri dari Makanan, Transportasi, Hiburan, dan Lainnya. Pemilihan kategori dilakukan menggunakan DropdownButtonFormField.
Gambar 3. Tampilan validasi input pada form transaksi
Form juga dilengkapi dengan validasi input. Apabila judul transaksi atau nominal belum diisi, sistem akan memberikan pesan kesalahan. Pada bagian nominal, sistem juga memeriksa agar nilai yang dimasukkan berupa angka bulat yang valid. Dengan demikian, data yang dimasukkan sebelum disimpan dapat diperiksa terlebih dahulu.
Gambar 4. Tampilan pesan setelah transaksi berhasil disimpan
Setelah seluruh input diisi dengan benar dan tombol Simpan Transaksi ditekan, sistem melakukan proses validasi. Jika seluruh data valid, aplikasi menampilkan pesan bahwa transaksi berhasil disimpan.
Latihan
5.1. Menambahkan Input Tanggal Transaksi
Pada latihan praktikum ditambahkan input tanggal transaksi sebelum tombol Simpan Transaksi. Input tanggal digunakan agar setiap transaksi memiliki informasi tanggal.
Salah satu cara yang dapat digunakan adalah membuat
TextFormField dengan format tanggal
DD/MM/YYYY. Field tersebut juga harus
dilengkapi validasi agar tanggal tidak boleh kosong.
5.2. Menggunakan showDatePicker()
Selain menggunakan input tanggal secara manual,
tanggal juga dapat dipilih menggunakan
showDatePicker(). Dengan cara ini pengguna
dapat memilih tanggal melalui kalender yang disediakan
oleh Flutter.
Setelah tanggal dipilih, nilai tanggal dapat ditampilkan pada field tanggal. Validasi tetap diperlukan agar pengguna tidak dapat menyimpan transaksi apabila tanggal belum dipilih.
Kesimpulan
Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa Flutter menyediakan berbagai widget yang dapat digunakan untuk menerima input dari pengguna. TextFormField dapat digunakan untuk membuat field input, sedangkan TextEditingController digunakan untuk mengambil dan mengontrol nilai yang dimasukkan pengguna.
Form dan GlobalKey<FormState> dapat digunakan untuk mengatur serta menjalankan validasi terhadap beberapa input sekaligus. DropdownButtonFormField juga dapat digunakan untuk menyediakan pilihan data yang dapat dipilih oleh pengguna.
Validasi input sangat penting untuk memastikan data yang dimasukkan sesuai dengan aturan yang telah ditentukan. Jika data tidak sesuai, aplikasi dapat memberikan pesan kesalahan kepada pengguna. Jika data telah valid, aplikasi dapat memproses data dan memberikan informasi melalui SnackBar.
Melalui praktikum ini berhasil dibuat sebuah formulir pencatatan transaksi yang memiliki input judul, nominal, kategori, validasi, dan proses penyimpanan. Praktikum juga memberikan pemahaman mengenai penggunaan StatefulWidget dalam membangun form yang bersifat interaktif.