Mobile App

Published on: 12 September 2026

Laporan Praktikum 1: Input Widget dan Basic Form

Pendahuluan

Praktikum ini bertujuan untuk memahami penggunaan basic form dalam pengembangan aplikasi Flutter, khususnya dalam menerima dan mengelola input dari pengguna melalui keyboard. Melalui praktikum ini, mahasiswa diharapkan mampu membuat berbagai input widget serta memahami cara mengontrol input yang diberikan oleh pengguna.

Basic Form merupakan bagian dalam Flutter yang digunakan untuk menerima, mengelola, dan melakukan validasi data dari pengguna. Beberapa widget yang dapat digunakan dalam pengelolaan input antara lain TextField, TextFormField, Checkbox, Switch, Dropdown, Radio, Dialog, DatePicker, BottomSheet, dan Snackbar. Input yang diberikan pengguna dapat diperiksa terlebih dahulu berdasarkan aturan atau format tertentu, kemudian nilainya dapat diambil dan diproses setelah proses validasi selesai dilakukan.

Repository Github

Text Field: TextField adalah widget yang digunakan untuk memasukkan text oleh pengguna, widget ini biasanya digunakan untuk membuat form inputan seperti form login, pencarian dll.

Text Form Field: TextFormField adalah widget versi lengkap dari TextField yang secara otomatis terintegrasi dengan logika validasi dan manajemen state dari sebuah form.

GlobalKey (FormState): GlobalKey merupakan objek unik atau key yang digunakan untuk mengidentifikasi dan mengakses state secara global, artinya kita dapat mengakses widget dari widget mana saja.

Validate(): Metode validate() merupakan sebuah fungsi yang terdapat pada FormState yang digunakan untuk menjalankan validasi pada setiap TextFormField yang ada di dalam Form.

SetState(): setState merupakan sebuah method yang ada pada flutter, method ini digunakan untuk rebuild ulang state yang ada pada StatefulWidget atau secara sederhana method ini digunakan untuk memberitahu flutter bahwa state yang ada pada StatefulWidget telah berubah dan widget tersebut perlu untuk rebuild. Misalkan kita memiliki variable name yang mempunyai value “masnoer” yang akan diubah menjad “nurfiah bin sutarwo” didalam StatefulWidget maka tampilan teks tersebut tidak akan berubah sebelum memanggil method setState().

Const: Kata kunci const pada widget Flutter digunakan untuk membuat widget menjadi konstanta pada saat kompilasi (compile-time). Penggunaan const dapat meningkatkan peforma karena widget const akan dibuat sekali dan akan disimpan pada memori sehingga dapat digunakan Kembali tanpa build ulang. Jika tidak menggunakan const maka widget akan di build() berkali-kali.

Langkah Kerja

1. Basic Form Text Field

Membuat file Dart baru bernama 'form-textfield.dart' di dalam folder /lib yang berisi tampilan basic form menggunakan widget TextField sebagai inputan dan ElevatedButton sebagai event listener. Dan menuliskan code berikut yang sesuai dengan modul:

Berikut adalah tampilannya jika kita run:

Selanjutnya pada class '_MyFormState', tambahkan 'TextEditingController' untuk mengambil input dari pengguna serta menyediakan method untuk menghapus atau membersihkan teks pada input.

Dan pada Widget 'TextField', tambahkan 'controller' '_textEditingController' untuk mengelola input, property untuk menentukan jenis input yang dapat dimasukkan pengguna, serta method sebagai event listener saat pengguna mengetik teks.

Lalu pada widget 'ElevatedButton', tambahkan variabel 'inputText' untuk menampung input dari keyboard dan tampilkan hasil input tersebut menggunakan widget 'SnackBar'.

Setelah itu kita coba run, maka berikut adalah hasil akhirnya:

2. Basic Form Text Form Field

Membuat file baru bernama 'form-textformfield.dart' di dalam folder /lib yang berisi form input menggunakan dua widget 'TextFormField' dan satu widget 'ElevatedButton' sesuai dengan kode program pada modul.

Nah, berikut adalah tampilan hasil run dari kode program diatas:

Setelah itu, pada class '_MyFormTextState', tambahkan 'GlobalKey', controller untuk mengelola input pada 'TextFormField', method untuk menghapus input 'name' dan 'email', serta method yang dijalankan ketika tombol diklik.

Lalu kita menambahkan sedikit code di class TextFormFIeld, 'validator' ini akan berfungsi untuk memvalidasi input email, yaitu memastikan kolom tidak kosong dan memastikan email mengandung karakter '@' sehingga format email yang dimasukkan dianggap valid.

Selanjutnya menambahkan method '_submitForm' pada properti 'onPressed' di 'ElevatedButton' untuk menjalankan proses validasi dan pengolahan data ketika tombol ditekan.

Kita sudah bisa save dan Hard Reload debugging yang tadi telah dijalankan, maka berikut adalah tampilan akhirnya:

3. Latihan/Tugas

Membuat form pendaftaran pengguna menggunakan empat input, yaitu nama, email, password, dan confirm password, serta satu tombol submit dengan membuat file 'main.dart' dan 'user_registration_form.dart', menggunakan 'MaterialApp' sebagai root, 'UserRegistrationForm' sebagai home dengan 'StatefulWidget', 'TextFormField' dan method 'validator' untuk validasi email serta kesamaan password dan confirm password, serta 'onPressed' pada tombol submit untuk memanggil method '_submitForm'.

Project ini terdiri dari dua file, yaitu 'main.dart' yang berfungsi sebagai root aplikasi menggunakan 'MaterialApp' dan 'user_registration_form.dart' yang berisi widget form pendaftaran menggunakan 'StatefulWidget'.

Pertama kita buat dulu file 'main.dart' merupakan entry point aplikasi yang berisi class 'MyApp' yang meng-extend 'StatelessWidget', menggunakan 'MaterialApp' sebagai root widget, serta mengatur properti 'home' ke 'UserRegistrationForm()' agar form pendaftaran menjadi halaman pertama saat aplikasi dijalankan.

Lalu membuat 'user_registration_form.dart' Karena form perlu menyimpan dan mengelola input dari pengguna secara dinamis (termasuk validasi), widget ini dibuat sebagai 'StatefulWidget'. Widget ini punya class state '_UserRegistrationFormState' yang menyimpan seluruh logika dan tampilan form.

Setelah itu menyiapkan 'GlobalKeyFormState' untuk mengakses dan melakukan validasi pada seluruh widget 'Form', serta empat 'TextEditingController' untuk mengelola dan mengambil nilai input dari field nama, email, password, dan confirm password.

Controller ini juga perlu dibersihkan (dispose) ketika widget dihancurkan, untuk mencegah memory leak.

Lalu membuat setiap input dibuat menggunakan 'TextFormField' yang berada di dalam widget 'Form', dengan 'controller' untuk mengelola nilai input, 'decoration' untuk mengatur label dan tampilan border, serta 'validator' untuk melakukan validasi input, sedangkan 'obscureText: true' digunakan pada password dan confirm password agar teks yang dimasukkan tersembunyi.

Membuat fungsi validate untuk tiap field.

Pertama '_validateNama' untuk memastikan input nama tidak kosong.

'_validateEmail' untuk memastikan input tidak kosong dan mengandung karakter @, sesuai format email.

'_validatePassword' untuk memastikan password tidak kosong dan memiliki panjang minimal (di sini diset 6 karakter).

'_validateConfirmPassword' untuk memastikan confirm password tidak kosong dan nilainya sama dengan nilai pada '_passwordController.text'.

Membuat fungsi '_submitForm' fungsi ini dipanggil ketika tombol submit ditekan. Di dalamnya, dipanggil '_formKey.currentState!.validate()'' yang akan menjalankan seluruh fungsi validator pada setiap 'TextFormField'. Jika semua input valid (mengembalikan true), maka akan muncul SnackBar sebagai notifikasi bahwa registrasi berhasil. Jika ada input yang tidak valid, Flutter secara otomatis menampilkan pesan error di bawah field yang bersangkutan tanpa perlu logika tambahan.

Selesai, berikut adalah tampilan hasil run dari kode program Latihan/Tugas: