Form dan Widget Input Lanjutan

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.

No Comment! Be the first one.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *