Konsep Form di Flutter

Form adalah komponen UI fundamental yang berfungsi untuk mengumpulkan data dari pengguna. Di Flutter, membangun form adalah proses yang terstruktur berkat serangkaian widget yang dirancang khusus untuk tujuan ini.

1. Pentingnya Form

Hampir setiap aplikasi membutuhkan interaksi dengan pengguna dalam bentuk input. Beberapa contoh umum meliputi:

• Autentikasi: Halaman login dan pendaftaran.
• Input Data: Menambahkan item baru, mengisi profil pengguna.
• Pencarian: Kolom untuk mencari konten.
• Feedback: Formulir kontak atau ulasan.

Flutter menyediakan cara yang kuat untuk mengelola semua skenario ini.

2. Widget Form

Widget Form adalah sebuah kontainer yang tidak terlihat secara visual. Fungsinya adalah untuk mengelompokkan beberapa field input (seperti TextFormField) menjadi satu kesatuan logis. Dengan menggunakan widget Form, Anda dapat:

• Memvalidasi semua field di dalamnya sekaligus.
• Menyimpan nilai dari semua field di dalamnya sekaligus.
• Mereset semua field di dalamnya ke nilai awal.

Form(
  key: _formKey, // Kunci untuk mengidentifikasi dan mengontrol form
  child: Column(
    children: <Widget>[
      // TextFormField dan widget lainnya akan ditempatkan di sini
    ],
  ),
)

3. GlobalKey<FormState>

Untuk dapat berinteraksi dengan Form (misalnya, untuk memanggil fungsi validasi), Anda memerlukan sebuah GlobalKey. GlobalKey adalah sebuah kunci unik di seluruh aplikasi yang memungkinkan Anda mengakses objek State dari sebuah widget.

Setiap widget Form memiliki State internal yang disebut FormState. FormState inilah yang memiliki method-method seperti validate(), save(), dan reset().

Cara Penggunaan:

1. Buat GlobalKey di dalam kelas State Anda.

   final _formKey = GlobalKey<FormState>();
   

2. Hubungkan GlobalKey tersebut ke properti key dari widget Form Anda.

   Form(
     key: _formKey,
     // ...
   )
   

3. Sekarang, Anda bisa menggunakan _formKey untuk mengakses FormState.

   // Contoh memanggil validasi
   if (_formKey.currentState!.validate()) {
     // Jika semua field valid...
   }
   

   Tanda seru ! digunakan karena kita yakin currentState tidak akan null setelah form dibangun.

4. Widget TextFormField

Meskipun Anda bisa menggunakan TextField biasa untuk input teks, TextFormField adalah pilihan yang tepat saat bekerja di dalam sebuah Form.

TextFormField adalah wrapper di sekitar TextField yang mengintegrasikannya dengan widget Form induk. Ini memberinya kemampuan tambahan:

• Validasi: Memiliki properti validator untuk pemeriksaan input.
• Penyimpanan: Memiliki properti onSaved yang dipicu saat _formKey.currentState.save() dipanggil.
• Reset: Nilainya akan direset saat _formKey.currentState.reset() dipanggil.

TextFormField(
  decoration: InputDecoration(
    labelText: 'Enter your email',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null; // null berarti valid
  },
  onSaved: (value) {
    // Simpan nilai ini
  },
)

Dengan memahami keempat elemen ini—Form, GlobalKey<FormState>, dan TextFormField—Anda sudah memiliki fondasi yang kuat untuk membangun dan mengelola form di aplikasi Flutter Anda.