Tujuan Pembelajaran
- Menggunakan Form dan TextFormField untuk membangun form.
- Mengelola beberapa TextEditingController secara rapi.
- Menggunakan dropdown, checkbox, dan radio.
- Membaca dan menampilkan nilai semua input.
Uraian Materi
Form adalah fondasi aplikasi yang mengumpulkan data pengguna. Flutter menyediakan Form sebagai wadah yang memudahkan validasi dan penyimpanan seluruh field sekaligus, dengan TextFormField sebagai input teks yang terintegrasi validasi.
formKey: GlobalKey(),
Form(
key: formKey,
child: Column(children: [
TextFormField(
controller: namaController,
decoration: const InputDecoration(labelText: 'Nama'),
),
]),
)Mengelola Banyak Field
Setiap input teks memerlukan controller sendiri. Untuk form panjang, pengelolaan banyak controller harus rapi: seluruhnya diinisialisasi di State, digunakan pada widget terkait, dan dibuang di dispose agar tidak terjadi kebocoran memori.
Input Beragam Bentuk
Untuk pilihan, diperkenalkan berbagai bentuk input: DropdownButtonFormField untuk memilih satu dari daftar, CheckboxListTile untuk beberapa pilihan bebas, dan RadioListTile untuk satu pilihan dari kelompok. Praktik menggabungkan ketiganya dalam satu form data diri.
DropdownButtonFormField(
value: jenisKelamin,
items: ['Laki-laki', 'Perempuan']
.map((e) => DropdownMenuItem(value: e, child: Text(e)))
.toList(),
onChanged: (v) => setState(() => jenisKelamin = v),
)Menyimpan Hasil Form
Setelah menekan tombol simpan, seluruh nilai dari controller dan variabel pilihan dikumpulkan menjadi satu objek data, misalnya map atau class user, lalu ditampilkan pada halaman ringkasan. Alur ini menjadi dasar form pendaftaran.
Form sebagai Wadah Kesatuan Input
Dengan membungkus TextFormField ke dalam Form yang memiliki GlobalKey, seluruh input dapat divalidasi dan disimpan dalam satu tindakan. Peserta memahami keuntungan pendekatan ini dibanding mengelola setiap field secara terpisah: alur menjadi terpusat dan kode lebih mudah dipelihara.
Mengatur Keyboard dan Tipe Input
Properti keyboardType mengubah keyboard yang muncul, misal number untuk angka atau emailAddress untuk alamat email. Pilihan ini membantu pengguna mengetik lebih cepat dan meminimalkan kesalahan. Peserta berlatih menyesuaikan keyboardType dengan jenis data pada setiap field.
Menyusun Form agar Nyaman Dibaca
Untuk form panjang, penyusunan visual sangat penting: pemberian label yang jelas, pengelompokan bagian yang bermakna, dan jarak antar field yang cukup. Peserta membagi form menjadi beberapa bagian dengan subjudul agar pengguna tidak merasa kewalahan.
Menyiapkan Model Data dari Form
Setelah semua input terkumpul, nilai-nilai tersebut disusun menjadi satu objek model, misalnya class Pendaftar berisi nama, email, dan pilihan. Penggunaan model membuat transfer data antar halaman lebih mudah dan menjadi jembatan untuk menyimpan ke database pada materi berikutnya.
Aktivitas Pembelajaran
- Menyimak demonstrasi Form dan TextFormField.
- Praktik membuat form data diri lengkap.
- Menggunakan dropdown, checkbox, dan radio.
- Menyatukan seluruh input ke dalam satu objek data.
Tugas dan Latihan
- Buat form pendaftaran anggota berisi nama, gender (radio), hobi (checkbox), dan jurusan (dropdown).
- Tampilkan ringkasan data setelah tombol Simpan ditekan.
- Pastikan seluruh controller dibuang pada dispose.
Evaluasi
Evaluasi dilakukan melalui pengamatan hasil praktikum, kuis singkat di akhir pertemuan, dan pemantauan proyek. Peserta yang belum mencapai indikator tertentu diberikan remedial melalui bimbingan ulang dan latihan tambahan pada pertemuan berikutnya.
Panduan Belajar Mandiri
Untuk menguatkan pemahaman, peserta disarankan membaca ulang kode yang telah dibuat, mencoba memodifikasi nilai dan properti, lalu mengamati perubahannya melalui hot reload. Eksperimen kecil-kecil semacam ini membangun intuisi yang tidak diperoleh hanya dari teori.
Kesulitan yang ditemui selama praktik dicatat pada jurnal belajar dan dibawa ke pertemuan berikutnya. Konsistensi belajar mandiri di antara sesi mempercepat penguasaan materi dan membuat praktikum di kelas berjalan lebih efektif.
Ringkasan Pertemuan
Pada pertemuan ke-13 fokus pembelajaran adalah form dan widget input lanjutan. Seluruh indikator tujuan difokuskan pada penguasaan materi tersebut secara praktis, sehingga peserta tidak hanya mengenal konsep tetapi mampu menerapkannya langsung dalam proyek Flutter yang sedang dikembangkan. Ringkasan nilai utama: menggunakan form dan textformfield untuk membangun form..
Kemampuan peserta diukur melalui penyelesaian latihan yang mencerminkan penerapan nyata, bukan sekadar hafalan. Setiap konsep baru selalu dikaitkan dengan materi sebelumnya agar terbentuk pemahaman yang utuh dan berkesinambungan sepanjang kurikulum.
Refleksi Diri
Bagian berikut mengajak peserta menelaah kembali sejauh mana materi telah dikuasai. Kejujuran dalam menilai diri menentukan efektivitas langkah perbaikan selanjutnya.
- Apakah saya dapat menjelaskan kembali pokok materi pertemuan ini tanpa melihat catatan?
- Apakah saya berhasil menyelesaikan seluruh latihan praktikum secara mandiri?
- Bila ada kendala, bagian manakah yang paling sulit dan bagaimana rencana saya mengatasinya?
Asesmen dan Tindak Lanjut
Hasil praktikum dan kuis digunakan untuk memetakan penguasaan peserta. Peserta yang nilainya belum memenuhi kriteria mengulang latihan pada bagian yang kurang dengan pendampingan, sedangkan yang telah menguasai diberikan pengayaan berupa pengembangan fitur tambahan. Catatan perbaikan disampaikan melalui umpan balik tertulis atau lisan.
Kesetiaan mengikuti alur pertemuan demi pertemuan merupakan kunci keberhasilan kemampuan membangun dan memvalidasi form input. Materi berikutnya dibangun di atas kompetensi yang telah dicapai, sehingga menuntaskan pembelajaran setiap pertemuan menjadi bagian penting dari pencapaian akhir. Peserta disarankan mempersiapkan diri membaca panduan praktikum sebelum pertemuan berikutnya tiba.
Dengan selesainya pertemuan ini, peserta menambah satu kompetensi pada peta belajar Mobile Programming. Kemajuan itu dicatat dan menjadi dasar penilaian akhir serta bahan diskusi proyek yang menutup keseluruhan kurikulum.