Laporan Praktikum 3

Aplikasi Mobile - Flutter

Praktikum 3 membahas Input Widgets & Forms pada Flutter dengan fokus pada penangkapan data pengguna, penggunaan DropdownButtonFormField, dan validasi input. Form digunakan untuk menerima judul transaksi, nominal, dan kategori serta memastikan data yang dimasukkan sesuai sebelum diproses.

Tujuan Praktikum

Input Data
  • Menangkap teks dari pengguna menggunakan controller.
  • Membuat form input untuk data transaksi.
Dropdown & Validasi
  • Menerapkan dropdown statis untuk kategori transaksi.
  • Melakukan validasi agar data kosong atau format salah dapat dicegah.

Alat dan Bahan

  • Flutter SDK
  • Visual Studio Code atau Android Studio
  • Emulator atau perangkat untuk menjalankan aplikasi

Langkah-Langkah Praktikum

1 Menyiapkan State dan Controller

Gunakan StatefulWidget karena isi formulir dapat berubah ketika pengguna mengetik dan memilih kategori. Siapkan GlobalKey untuk validasi, controller untuk judul dan nominal, serta state untuk dropdown kategori.

StatefulWidget, GlobalKey, dan Controller

Gambar 1. Menyiapkan StatefulWidget, GlobalKey, dan Controller

2 Membuat Kolom Input

Bungkus seluruh kolom dengan widget Form dan hubungkan dengan _formKey. Buat TextFormField untuk Judul Transaksi dan Nominal. Pada nominal digunakan TextInputType.number serta validasi agar nilai tidak kosong dan harus berupa angka yang valid.

Input Judul Transaksi dan Nominal

Gambar 2. Input Judul Transaksi dan Nominal beserta validasi

3 Dropdown dan Tombol Simpan

Tambahkan DropdownButtonFormField untuk memilih kategori Makanan, Transportasi, Hiburan, atau Lainnya. Selanjutnya tambahkan tombol Simpan Transaksi untuk menjalankan validasi keseluruhan. Jika valid, aplikasi menampilkan SnackBar.

Dropdown kategori dan tombol simpan

Gambar 3. Dropdown kategori dan tombol Simpan Transaksi

4 Output

Setelah tombol Simpan ditekan, jika semua input valid, aplikasi menampilkan SnackBar dengan pesan "Transaksi berhasil disimpan!".

Output transaksi berhasil

Gambar 4. Output ketika transaksi berhasil disimpan

Tugas Praktikum

1 Menambahkan Input Tanggal Transaksi

Tambahkan satu input baru sebelum tombol Simpan untuk mengisi Tanggal Transaksi. Sesuai modul, input dapat dibuat menggunakan TextFormField dengan format DD/MM/YYYY atau menggunakan fungsi showDatePicker.

Input tanggal transaksi

Gambar 5. Penambahan input Tanggal Transaksi

2 Menambahkan Validasi Tanggal

Berikan validasi pada input tanggal agar wajib diisi. Jika tanggal tidak diisi ketika tombol Simpan ditekan, form menampilkan pesan kesalahan dan data tidak diproses.

Validasi tanggal wajib diisi

Gambar 6. Validasi Tanggal Transaksi wajib diisi

3 Hasil Akhir Aplikasi Setelah Tugas

Setelah tugas selesai, form transaksi memiliki input Judul Transaksi, Nominal, Kategori, dan Tanggal Transaksi. Form kemudian dapat divalidasi sebelum proses simpan dijalankan.

Hasil akhir aplikasi setelah tugas

Gambar 7. Hasil akhir aplikasi setelah tugas praktikum

Hasil Praktikum

Hasil praktikum berupa halaman form transaksi pada Flutter yang dapat menerima Judul Transaksi, Nominal, dan Kategori. Form menggunakan controller untuk mengambil data, dropdown untuk memilih kategori, serta validasi untuk mencegah input kosong atau format nominal yang salah. Pada tugas, ditambahkan Tanggal Transaksi sebelum tombol Simpan dengan validasi wajib diisi.

Kesimpulan

Praktikum 3 memberikan pemahaman tentang pembuatan form input pada Flutter. TextFormField digunakan untuk menerima data teks dan nominal, DropdownButtonFormField digunakan untuk memilih kategori, sedangkan GlobalKey dan validator digunakan untuk memeriksa data sebelum disimpan. Penambahan Tanggal Transaksi pada tugas menunjukkan penerapan input tambahan beserta validasi wajib diisi pada sebuah form.

Repository GitHub

Source code Praktikum dapat dilihat melalui repository berikut.

Lihat Repository GitHub