Tujuan Pembelajaran
- Merancang struktur form multi-bagian yang rapi.
- Memisahkan form ke widget/komponen terpisah.
- Mengumpulkan data dari beberapa halaman form.
- Menyimpan hasil form ke variabel/objek di suatu state.
Uraian Materi
Form kompleks seperti pendaftaran berisi banyak bagian: data pribadi, data alamat, dan data pendidikan. Agar mudah dikelola, form dipecah menjadi beberapa widget terpisah yang masing-masing menangani satu bagian, lalu hasilnya digabungkan pada halaman utama.
Komponen Form Terpisah
Setiap bagian dijadikan Stateless atau Stateful widget dengan param callback ketika nilainya berubah. Halaman utama menyimpan semua hasil dan meneruskannya ke langkah berikutnya. Pola ini membuat kode lebih mudah diuji dan dibaca dibanding menulis semua field dalam satu file besar.
Form Multi-Langkah (Stepper)
Stepper menyajikan form bertahap: langkah pertama data pribadi, kedua alamat, ketiga tinjauan. Pengguna berpindah dengan tombol Lanjut/Kembali; seluruh nilai disimpan pada state halaman induk. Ini pola yang umum pada alur onboarding.
Stepper(
currentStep: _step,
onStepContinue: () => setState(() => _step++),
onStepCancel: () => setState(() => _step--),
steps: [
Step(title: const Text('Pribadi'), content: TextFormField(decoration: const InputDecoration(labelText: 'Nama'))),
Step(title: const Text('Alamat'), content: TextFormField(decoration: const InputDecoration(labelText: 'Alamat'))),
],
)Agregasi dan Penyimpanan Data Form
Setelah seluruh bagian terisi dan lolos validasi, data digabung menjadi satu objek (misal class Pendaftar) dan disimpan di state global dengan Provider agar dapat diakses halaman lain. Pertemuan ini menutup modul form dan menjadi jembatan menuju database lokal.
Praktik Terpadu
Peserta menyelesaikan form pendaftaran lengkap dua langkah, menampilkan ringkasan, dan menyiapkan objek data untuk dipakai pada pertemuan penyimpanan. Kualitas penulisan kode (pemisahan file dan penamaan yang jelas) menjadi tolok ukur penilaian.
Manfaat Memecah Form Menjadi Komponen
Form yang panjang jika ditulis dalam satu file akan sulit dibaca dan dirawat. Memecah menjadi beberapa widget memungkinkan tiap bagian dikembangkan dan diuji secara terpisah. Komponen juga dapat dipakai ulang pada bagian lain aplikasi.
Pola Komunikasi Antar Widget Form
Ketika beberapa widget form perlu berbagi nilai, komunikasi dilakukan melalui parameter dan callback. Widget induk menyimpan semua nilai pada state, sementara widget bagian mengirim perubahan lewat fungsi yang dipanggil saat nilainya berubah. Pola ini terlihat jelas pada form multi-langkah.
Menjaga State Saat Berpindah Langkah
Pada Stepper, nilai yang diisi pada langkah pertama tidak hilang saat menuju langkah kedua karena seluruh data disimpan pada state induk. Pemahaman ini menghubungkan pentingnya state management dengan pengalaman pengguna yang lancar.
Persiapan Menuju Penyimpanan Data
Dengan selesainya agregasi form menjadi objek model, peserta sudah menyiapkan struktur yang siap disimpan. Pertemuan berikutnya memperkenalkan cara menyimpan data tersebut secara permanen di perangkat, menutup kesenjangan antara input dan persistensi.
Aktivitas Pembelajaran
- Merancang struktur form multi-bagian.
- Memecah form menjadi komponen widget.
- Menggunakan Stepper untuk form bertahap.
- Mengumpulkan dan menyimpan hasil pada model objek.
Tugas dan Latihan
- Bangun form pendaftaran dua langkah dengan Stepper.
- Simpan seluruh hasil ke objek Pendaftar menggunakan Provider.
- Tampilkan ringkasan dan analisis struktur file yang rapi.
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 umum praktik, catatan belajar, dan refleksi tersedia di Panduan Belajar Kribbi Study.