Laporan Praktikum Aplikasi Mobile: Input Widgets dan Basic Form

A. Membuat Tampilan Basic Form dengan TextField

Pada tahap ini dibuat file dart baru bernama form-textfield di dalam folder lib. Struktur halaman disusun menggunakan Scaffold dengan AppBar berjudul "Basic Form". Bagian isi halaman dibungkus dengan Padding dan Column agar susunan widget rapi dan sejajar ke kiri, terdiri dari widget Text sebagai label, widget TextField sebagai kolom inputan nama lengkap, serta ElevatedButton yang akan berfungsi sebagai pemicu aksi.

Hasil di atas menunjukkan tampilan form yang telah dijalankan pada browser/emulator, berupa kolom inputan nama lengkap beserta tombol "Tampilkan mama" yang belum memiliki fungsi apa pun karena onPressed masih dibiarkan kosong.

B. Menambahkan TextEditingController

Pada class _MyFormState ditambahkan sebuah variabel bertipe TextEditingController yang bertugas mengambil serta mengelola nilai inputan dari pengguna. Bersamaan dengan itu, method dispose() dioverride untuk membersihkan controller tersebut dari memori ketika widget sudah tidak digunakan lagi, sehingga aplikasi terhindar dari kebocoran memori (memory leak).

C. Menghubungkan Controller pada Widget TextField

Widget TextField yang sebelumnya dibuat dilengkapi dengan tiga properti tambahan, yaitu controller yang dihubungkan dengan _textEditingController, keyboardType untuk menentukan jenis papan ketik yang muncul, dan onChanged yang berfungsi sebagai event listener untuk mencetak teks yang sedang diketik pengguna secara langsung ke console setiap kali terjadi perubahan karakter.

D. Menampilkan Inputan Menggunakan SnackBar

Method onPressed pada ElevatedButton diisi dengan kode yang mengambil nilai teks dari _textEditingController, kemudian nilai tersebut ditampilkan kepada pengguna melalui widget SnackBar, yaitu notifikasi singkat yang muncul pada bagian bawah layar aplikasi.

Hasil pengujian menunjukkan bahwa setelah nama lengkap diketikkan dan tombol ditekan, SnackBar muncul di bagian bawah layar menampilkan teks nama yang telah diinputkan sebelumnya, membuktikan bahwa controller berhasil mengambil nilai dari TextField dengan benar.

E. Membuat Basic Form dengan TextFormField

Dibuat file dart baru bernama form-textformfield yang berisi tampilan form dengan dua buah widget TextFormField untuk kolom nama dan email, serta satu ElevatedButton bertuliskan "Submit" yang dibungkus SizedBox agar lebar tombol memenuhi layar. Berbeda dari TextField, TextFormField dirancang agar dapat bekerja sama dengan widget Form untuk keperluan validasi data.

Tampilan awal ini masih menunjukkan dua kolom input yang belum tersambung dengan controller maupun validator, sehingga tombol Submit belum dapat memicu proses apa pun.

F. Menambahkan GlobalKey dan Controller

Pada class _MyFormTextState ditambahkan variabel _formKey bertipe GlobalKey<FormState> untuk mengakses status Form secara global, beserta dua buah TextEditingController untuk menampung inputan nama dan email. Dibuat pula method _submitForm() yang memanggil _formKey.currentState!.validate() untuk menjalankan seluruh fungsi validator pada setiap TextFormField; apabila seluruh validasi bernilai true, nilai nama dan email akan ditampilkan melalui SnackBar.

G. Membungkus Tampilan dengan Widget Form dan Menambahkan Validator

Tampilan Column dibungkus menggunakan widget Form dan diberi properti key: _formKey agar terhubung dengan GlobalKey yang telah dibuat. Setiap TextFormField dilengkapi controller masing-masing beserta fungsi validator: kolom nama akan menampilkan pesan error apabila dikosongkan, sedangkan kolom email memvalidasi dua kondisi sekaligus, yaitu memastikan email tidak kosong dan memastikan formatnya mengandung karakter "@".

H. Menghubungkan Method _submitForm ke ElevatedButton

Method _submitForm dikaitkan dengan properti onPressed pada ElevatedButton yang dibungkus SizedBox agar lebar tombol memenuhi layar. Dengan demikian, setiap kali tombol Submit ditekan, proses validasi pada seluruh TextFormField akan dijalankan terlebih dahulu sebelum data ditampilkan.

Hasil pengujian menunjukkan bahwa saat kolom nama atau email dikosongkan atau format email tidak valid, pesan error otomatis muncul di bawah field yang bersangkutan. Ketika seluruh data valid dan tombol Submit ditekan, SnackBar muncul menampilkan nama dan email yang berhasil divalidasi.

Implementasi Form Pendaftaran Pengguna

Sesuai instruksi latihan Kelas B, dibuat aplikasi form pendaftaran pengguna yang terdiri dari empat kolom inputan yaitu nama, email, password, dan confirm password, beserta satu tombol submit. Implementasi dipecah menjadi dua file dart, yaitu main.dart sebagai root aplikasi dan user_registration_form.dart yang berisi logika form.

File main.dart menggunakan MaterialApp sebagai root aplikasi dengan properti home diarahkan langsung ke widget UserRegistrationForm yang bertipe StatefulWidget.

Pada class _UserRegistrationFormState dideklarasikan sebuah _formKey bertipe GlobalKey<FormState> beserta empat TextEditingController untuk menampung nilai nama, email, password, dan confirm password. Seluruh controller tersebut dibersihkan pada method dispose() agar tidak membebani memori aplikasi.

Kolom nama divalidasi agar tidak boleh dikosongkan, sedangkan kolom email divalidasi dengan dua ketentuan, yaitu tidak boleh kosong dan wajib mengandung karakter "@" agar dianggap sebagai format email yang benar.

Kolom password divalidasi agar tidak kosong dan memiliki panjang minimal enam karakter. Kolom confirm password divalidasi dengan membandingkan nilainya terhadap nilai pada controller password menggunakan operator perbandingan string, sehingga apabila kedua nilai tersebut berbeda, pesan error "Password tidak sama" akan ditampilkan.

Method _submitForm memanggil _formKey.currentState!.validate() untuk menjalankan seluruh validator secara serentak. Apabila hasilnya bernilai true, aplikasi akan menampilkan SnackBar bertuliskan "Pendaftaran Berhasil" sebagai tanda bahwa seluruh data yang diinputkan telah lolos validasi.

Tampilan awal menunjukkan keempat kolom inputan tersusun rapi secara vertikal beserta tombol Submit di bagian bawah yang lebarnya memenuhi layar.

Ketika tombol Submit ditekan pada kondisi terdapat kolom yang masih kosong, format email salah, atau password dan confirm password tidak sama, pesan error yang sesuai langsung muncul di bawah masing-masing field yang bermasalah.

Setelah seluruh data diisi dengan benar dan tombol Submit ditekan, SnackBar "Pendaftaran Berhasil" muncul di bagian bawah layar, menandakan bahwa seluruh proses validasi telah berjalan sesuai dengan yang diharapkan.