Laporan Praktikum: Aplikasi Mobile Input Widgets And Form

A. PENDAHULUAN

Pengumpulan dan validasi data merupakan komponen kritikal dalam interaksi pengguna pada aplikasi mobile. Dokumentasi ini menguraikan implementasi sistem formulir pendaftaran (User Registration Form) yang interaktif menggunakan framework Flutter. Pengembangan sistem ini berfokus pada manajemen state dinamis memanfaatkan StatefulWidget dan GlobalKey. Implementasi teknis mencakup penerapan client-side validation secara real-time pada TextFormField termasuk verifikasi otentikasi format email dan komparasi password serta pendekatan pemisahan struktur direktori (modular code) guna memastikan skalabilitas dan efisiensi pemeliharaan kode sumber.

B. LANGKAH KERJA & INSTALASI

1. Inisialisasi Proyek

Membangun kerangka dasar proyek Flutter menggunakan perintah flutter create melalui Terminal atau menggunakan Command Palette pada IDE.

Pembuatan Project Flutter.

2. Implementasi Standard Form

Mengintegrasikan StatefulWidget untuk mengelola perubahan status antarmuka secara dinamis selama siklus hidup komponen

Memanfaatkan instansiasi TextEditingController guna menangkap nilai masukan teks, yang dikombinasikan dengan pemantauan kejadian (event listener onChanged) untuk melacak aktivitas penomoran atau pengetikan data secara real-time.

Menerapkan mekanisme umpan balik visual (feedback) instan melalui komponen SnackBar yang dikendalikan oleh ScaffoldMessenger saat tombol aksi dieksekusi.

3. Implementasi Form Advance

Membungkus elemen masukan ke dalam widget Form yang diregistrasikan menggunakan pengendali status global berbasis GlobalKey

Menyematkan logika pemeriksaan integritas data otomatis melalui properti validator pada masing-masing kolom input, meliputi verifikasi keberadaan nilai data (not null/empty) serta validasi spesifik format karakter (seperti penerapan aturan wajib karakter '@' pada kolom surel).

Mengonstruksi prosedur eksekusi terpadu (_submitForm) yang memvalidasi keabsahan seluruh parameter formulir secara simultan sebelum merender status keberhasilan pemrosesan data kepada pengguna

4. Pembuatan Form Pendaftaran

Membuat dua buah berkas kerja (file) Dart secara terpisah, yaitu main.dart sebagai titik masuk (entry point) aplikasi dan user_registration_form.dart untuk antarmuka formulir

5. Konfigurasi Menggunakan Root Widget

Menggunakan widget MaterialApp sebagai root (akar) pada berkas main.dart dan mengatur properti home agar menampilkan widget UserRegistrationForm

Mengimplementasikan StatefulWidget pada kelas UserRegistrationForm untuk memungkinkan pengelolaan status (state) data formulir yang dinamis

Membangun empat kolom input (Nama, Email, Password, Konfirmasi Password) menggunakan widget TextFormField

6. Submission

Mengonfigurasi tombol eksekusi dengan metode onPressed. Ketika interaksi klik (tap) terjadi, parameter ini diinstruksikan untuk memanggil metode _submitForm guna memvalidasi seluruh data secara serentak

E. KESIMPULAN

Eksplorasi pembuatan formulir pada Flutter menunjukkan bahwa pengelolaan input pengguna dapat dilakukan melalui dua pendekatan utama, yakni standar dan tingkat lanjut. Penggunaan TextField sederhana yang didukung oleh TextEditingController memfasilitasi penangkapan data dan pemantauan aktivitas pengetikan secara langsung. Di sisi lain, integrasi TextFormField bersama Form dan GlobalKey menghadirkan sistem validasi otomatis yang lebih robust untuk menjaga integritas data sebelum diproses oleh aplikasi. Pemisahan kode secara modular terbukti efektif dalam menjaga keterbajaran struktur direktori sekaligus mendukung praktik pengembangan perangkat lunak yang bersih dan terskala.