I. Tujuan Praktikum
Setelah menyelesaikan praktikum ini, mahasiswa diharapkan mampu:
- Membuat beberapa input widgets pada aplikasi Flutter
- Membuat dan mengontrol inputan dari user menggunakan TextField dan TextFormField
- Memahami penggunaan TextEditingController untuk mengambil nilai inputan
- Memahami dan menerapkan validasi form menggunakan GlobalKey<FormState> dan method validate()
- Memahami fungsi setState() dan penggunaan kata kunci const pada widget Flutter
II. Dasar Teori
Basic Form merupakan widget yang berfungsi sebagai inputan nilai seperti TextField, TextFormField, CheckBox, Switch, Dropdown, Radio, Dialog, DatePicker, BottomSheet, Snackbar, dan lain-lain. Basic Form digunakan untuk validasi dan mengelola inputan dari berbagai field. Form akan memberikan tampilan inputan, kemudian inputan diperiksa apakah sudah sesuai dengan aturan atau format yang ditetapkan, selanjutnya data inputan diambil nilainya setelah proses pengecekan selesai.
TextField adalah widget yang digunakan untuk memasukkan text oleh pengguna, biasanya digunakan untuk
membuat form inputan seperti form login, pencarian, dll. TextField dapat mengelola teks menggunakan
TextEditingController dan memiliki property lengkap seperti style, decoration, dan jenis inputan.
TextFormField adalah widget versi lengkap dari TextField yang secara otomatis terintegrasi dengan
logika validasi dan manajemen state dari sebuah Form. TextFormField memiliki properti validator untuk
memeriksa apakah input sudah sesuai aturan, serta menampilkan pesan error otomatis di bawah field jika validasi gagal.
GlobalKey<FormState> merupakan objek unik yang digunakan untuk mengidentifikasi dan mengakses
state secara global. Dengan GlobalKey pada widget Form, method seperti validate() atau save()
dapat dipanggil dari luar widget tersebut, biasanya dari onPressed pada ElevatedButton. Method validate()
akan mengecek setiap TextFormField, menjalankan fungsi validator masing-masing, dan mengembalikan false jika ada error
atau true jika seluruh input valid.
setState() digunakan untuk memberitahu Flutter bahwa state pada StatefulWidget telah berubah sehingga widget perlu di-rebuild. Sedangkan kata kunci const digunakan untuk membuat widget menjadi konstanta pada saat kompilasi (compile-time), sehingga widget hanya dibuat sekali dan disimpan di memori, meningkatkan performa karena tidak perlu di-build ulang.
III. Alat dan Bahan
- Laptop / Komputer
- Flutter SDK
- Visual Studio Code / Android Studio
- Browser (Google Chrome) atau Emulator Android
- Project Flutter (dari praktikum sebelumnya)
IV. Langkah - Langkah Praktikum
Buat file dart baru dengan nama form-textfield di dalam folder lib, kemudian buat tampilan basic form menggunakan widget TextField untuk inputan dan ElevatedButton untuk event listener.
Pada class _MyFormState, tambahkan variable TextEditingController untuk mengambil inputan dari user, serta method dispose() untuk membersihkan controller ketika widget tidak lagi digunakan.
Tambahkan property controller, keyboardType, dan onChanged pada widget TextField agar dapat mengambil dan mendengarkan inputan dari keyboard.
Tambahkan kode program pada widget ElevatedButton agar nilai inputan pada TextField ditampilkan menggunakan widget SnackBar ketika tombol ditekan.
Simpan kemudian RUN, maka hasilnya akan tampil seperti berikut:
Buat file baru di dalam folder lib dengan nama form-textformfield, kemudian buat form inputan menggunakan 2 buah widget TextFormField (Nama dan Email) serta 1 buah ElevatedButton.
Pada class _MyFormTextState, tambahkan GlobalKey<FormState>, controller untuk masing-masing field, serta method _submitForm() yang akan menjalankan validasi ketika tombol Submit ditekan.
Bungkus widget tampilan menggunakan Form dan tambahkan key: _formKey, kemudian ubah kode program pada TextFormField dengan menambahkan controller dan validator.
.png)
.png)
Hubungkan method _submitForm pada onPressed ElevatedButton, simpan, lalu RUN. Ketika tombol Submit ditekan dan seluruh field valid, SnackBar akan menampilkan pesan berhasil.
.png)
.png)
V. Latihan / Tugas
Membuat aplikasi kalkulator yang dapat menjalankan operasi kabataku (kali, bagi, tambah, kurang), menggunakan 2 buah widget inputan (TextField atau TextFormField) untuk menerima nilai, ElevatedButton untuk mengeksekusi operasi, dan widget Text untuk menampilkan hasil.
Buat file dart baru dengan nama kalkulator.dart di dalam folder lib
Tambahkan StatefulWidget karena hasil perhitungan akan berubah.
Kedua controller digunakan untuk membaca angka dari input.
| Widget / Method | Fungsi |
|---|---|
| double.tryParse() | Mengubah teks menjadi angka desimal, menghasilkan null jika teks tidak bisa dibaca sebagai angka. |
| trim() | Menghapus spasi di awal dan akhir input. |
| replaceAll(',', '.') | Mengganti koma dengan titik untuk format angka yang benar. |
| Pemeriksaan null | Memastikan nilai input tidak null sebelum diproses. |
| Pemeriksaan pembagi nol | Memastikan pembagi tidak nol sebelum melakukan pembagian. |
| switch (operasi)() | Menghandle berbagai operasi matematika berdasarkan pilihan pengguna. |
| setState() | Memberitahu Flutter untuk rebuild widget setelah state berubah. |
Dua TextField menerima angka. decimal: true dan signed: true meminta keyboard yang mendukung angka desimal serta tanda negatif.
Wrap menyusun tombol dan memindahkannya ke baris berikutnya jika lebar layar tidak cukup. Setiap ElevatedButton memanggil _hitung() dengan simbol operasi yang sesuai. Text('Hasil: $_hasil') menampilkan hasil perhitungan, sesuai instruksi tugas.
Simpan dengan Ctrl + S dan nyalakan emulator Android Studio untuk menjalankan aplikasi.
.png)
.png)
VI. Hasil & Pembahasan
Praktikum ini berhasil mengimplementasikan pembuatan basic form pada Flutter menggunakan dua pendekatan, yaitu TextField dengan TextEditingController dan TextFormField dengan GlobalKey<FormState> beserta validasi.
Inputan pada TextField berhasil ditangkap dan ditampilkan melalui SnackBar, sedangkan pada TextFormField, validasi
berjalan sesuai aturan yang ditetapkan (field tidak boleh kosong dan email harus mengandung karakter "@"), membuktikan
bahwa method validate() dan _formKey bekerja dengan benar.
| Widget / Method | Fungsi |
|---|---|
| TextField | Menerima input teks dari keyboard tanpa validasi bawaan |
| TextEditingController | Mengambil dan mengelola nilai inputan dari TextField |
| TextFormField | Menerima input teks dengan validasi terintegrasi melalui properti validator |
| GlobalKey<FormState> | Mengakses dan mengontrol state Form dari luar widget, mis. pada onPressed |
| validate() | Menjalankan validasi seluruh TextFormField di dalam Form |
| setState() | Memberitahu Flutter untuk rebuild widget setelah state berubah |
| SnackBar | Menampilkan pesan singkat sebagai hasil dari inputan atau validasi |
VII. Kesimpulan
Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa:
- TextField cocok digunakan untuk inputan sederhana tanpa memerlukan validasi kompleks.
- TextFormField lebih tepat digunakan ketika inputan memerlukan validasi, karena sudah terintegrasi dengan FormState.
- GlobalKey<FormState> memungkinkan pengaksesan dan pengontrolan state Form dari widget lain, seperti tombol submit.
- Method validate() efektif untuk menjalankan validasi seluruh field sekaligus dalam satu Form.
- Penggunaan const pada widget membantu meningkatkan performa aplikasi karena mengurangi proses build ulang yang tidak perlu.
- Seluruh komponen basic form berhasil diimplementasikan dan berfungsi sesuai dengan yang diharapkan.
Lihat Repository GitHub