Praktikum Flutter: Form TextField

Published: Sabtu, 27 September 2025 | Author: Ezza Addini

Praktikum ini membahas implementasi Form pada Flutter dengan menggunakan TextField dan TextFormField, serta interaksinya dengan ElevatedButton untuk mengelola input dan state.

Langkah-Langkah Praktikum
  1. Membuat file form-textfield.dart Buat file baru dengan nama form-textfield.dart dan tambahkan class MyFormApp serta class stateful _MyFormState.
    Membuat file form-textfield.dart
    Gambar 1: Pembuatan file form-textfield.dart.
  2. Menambahkan kode program pada class _MyFormState Tambahkan variabel controller untuk menangani input dari pengguna.
    Class MyFormState
    Gambar 2: Penambahan controller pada _MyFormState.
  3. Menambahkan properti pada Widget TextField Gunakan properti seperti controller, decoration (label, hint), dan keyboardType.
    Properti TextField
    Gambar 3: TextField dengan properti controller dan decoration.
  4. Menambahkan kode program pada ElevatedButton Tambahkan aksi ketika tombol ditekan untuk menampilkan teks dari input.
    ElevatedButton
    Gambar 4: Tombol dengan aksi menampilkan input.
  5. Menambahkan setState() Agar UI diperbarui setiap kali tombol ditekan, bungkus aksi di dalam setState().
    Output tanpa setState
    Gambar 5: Output sebelum setState().
    Output dengan setState
    Gambar 6: Output setelah setState().
  6. Menggunakan TextFormField Untuk validasi input, gunakan TextFormField dengan validator. Komponen ini sangat berguna ketika form memiliki banyak field.
    Kode TextFormField
    Gambar 7: Kode penggunaan TextFormField dengan validator.
    Output TextFormField
    Gambar 8: Output penggunaan TextFormField.
Kesimpulan

Pada praktikum ini dipelajari penggunaan TextField dan TextFormField dalam Flutter, serta bagaimana cara memperbarui state menggunakan setState(). Dengan demikian, input pengguna dapat ditangani dengan baik, ditampilkan, dan divalidasi secara dinamis di aplikasi Flutter.

Tugas

Praktikum ini ditutup dengan tugas yang dapat diakses melalui link berikut: GitHub Repository.

Tugas Form
Gambar 9: Tampilan tugas praktikum.
Kembali ke Daftar Laprak