Form & Validasi Input

Jangan percaya input pengguna

Pengguna bisa mengosongkan kolom, salah mengetik email, atau memasukkan apa saja. Aplikasi yang baik memeriksa isian dan menunjukkan pesan yang jelas, persis seperti petugas loket yang berkata "formulirnya belum lengkap".

Tiga bahan: Form, TextFormField, GlobalKey

• Form — pembungkus yang mengelompokkan beberapa isian.
• TextFormField — versi TextField yang bisa divalidasi. Punya parameter validator.
• GlobalKey<FormState> — "kunci" untuk menyuruh Form memeriksa semua isiannya.

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: const InputDecoration(labelText: 'Email'),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Email wajib diisi';
          }
          if (!value.contains('@')) {
            return 'Email tidak valid';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // semua isian valid
          }
        },
        child: const Text('Daftar'),
      ),
    ],
  ),
)

Cara kerja validator

• Function validator menerima isi kolom (value, tipenya String? sehingga bisa null).
• Ia mengembalikan pesan error (String) bila isian bermasalah, atau null bila sudah benar. Pesan itu otomatis muncul berwarna merah di bawah kolom.
• value == null || value.isEmpty: bagian pertama memeriksa null; jika null, bagian kedua tidak dijalankan (sehingga aman).

Memicu validasi

_formKey.currentState!.validate() menjalankan semua validator dan mengembalikan true bila semuanya null. Tanda ! berarti "saya yakin tidak null" (Form sudah terpasang saat tombol ditekan).