Pendahuluan
Praktikum ini membahas penggunaan Basic Form pada Flutter untuk menerima,
mengelola, dan memvalidasi input dari pengguna. Materi yang dipelajari meliputi penggunaan TextField,
TextFormField, GlobalKey, validate(), serta pengelolaan perubahan state
menggunakan setState(). Selain itu, praktikum ini juga membahas penggunaan const untuk
meningkatkan efisiensi dalam proses pembangunan ulang (rebuild) widget pada aplikasi Flutter.
Tujuan
Membuat Input Widgets
Mampu membuat beberapa jenis input widgets pada Flutter untuk menerima inputan dari keyboard.
Mengelola Inputan
Mampu membuat dan mengontrol inputan dari user, termasuk melakukan validasi pada setiap field.
Alat dan Tools yang Digunakan
Langkah Kerja
Basic Form dengan TextField
Membuat File Baru
Buat file dart baru dengan nama form-textfield.dart di dalam folder lib.
Membuat Tampilan Dasar
Buat tampilan basic form dengan menggunakan widget TextField untuk inputan, ElevatedButton
untuk event listener.
Jika dijalankan maka akan muncul tampilan seperti gambar berikut.
Menambahkan Controller
Pada class _MyFormState, tambahkan TextEditingController dan method dispose()
untuk membersihkan text inputan.
Menghubungkan Controller ke TextField
Tambahkan properti controller, keyboardType, dan onChanged pada widget
TextField agar inputan dapat diambil.
Menampilkan Inputan pada ElevatedButton
Tambahkan kode program berikut pada onPressed widget ElevatedButton agar inputan
ditampilkan melalui SnackBar.
Simpan dan Jalankan
Simpan file kemudian jalankan program. Ketikkan nama pada field, lalu tekan tombol untuk melihat hasil inputan yang ditampilkan
pada SnackBar.
Basic Form dengan TextFormField
Membuat File Baru
Buat file dart baru dengan nama form-textformfield.dart di dalam folder lib.
Membuat Tampilan Form
Buat form inputan menggunakan 2 buah widget TextFormField dan 1 buah ElevatedButton untuk submit.
Jika dijalankan maka akan muncul tampilan seperti gambar berikut.
Menambahkan Key, Controller, dan Fungsi Submit
Tambahkan pada class _MyFormTextState kode berikut: GlobalKey<FormState>, controller untuk masing-masing field,
method dispose(), dan fungsi _submitForm().
Membungkus dengan Widget Form
Bungkus widget tampilan menggunakan Form dan tambahkan key: _formKey agar dapat diakses secara global.
Menambahkan Validator
Ubah kode program pada kedua TextFormField untuk menambahkan controller dan properti validator. Field email juga
divalidasi harus mengandung karakter @.
Menghubungkan Fungsi Submit
Tambahkan method _submitForm pada onPressed di ElevatedButton.
Simpan dan Jalankan
Simpan file lalu jalankan program. Isi field nama dan email, kemudian tekan tombol Submit. Jika validasi berhasil, output akan tampil seperti berikut.
Tugas
Kode Program
Implementasi kode program kalkulator sederhana menggunakan Flutter dengan dua inputan untuk menerima nilai dan tombol operasi untuk melakukan perhitungan airtmatika.
Hasil Program
Hasil implementasi berupa aplikasi kalkulator sederhana yang dapat menerima dua nilai masukan dan menampilkan hasil operasi penjumlahan, pengurangan, perkalian, dan pembagian.
Kesimpulan
Dari praktikum yang telah dilakukan, telah dipelajari dan dipraktikkan penggunaan input widgets dan basic form pada Flutter, di antaranya:
- TextField digunakan untuk menerima inputan teks sederhana tanpa validasi bawaan.
- TextFormField digunakan untuk inputan yang memerlukan validasi, karena sudah terintegrasi dengan
FormState. - GlobalKey<FormState> digunakan untuk mengakses dan mengontrol status form dari luar widget, seperti memanggil
validate(). - setState() digunakan untuk memberi tahu Flutter agar melakukan rebuild pada tampilan setelah terjadi perubahan state.
- const digunakan untuk meningkatkan performa aplikasi dengan mencegah widget dibangun ulang secara tidak perlu.
Repository Github
Kode project dapat diakses melalui repository Github berikut.
Buka Github