Bagaimanakah anda mengendalikan borang dan pengesahan input dalam Flutter?

Question

Accepted Answer

Kebanyakan aplikasi mempunyai **borang** (log masuk, daftar, kemasukan data) yang memerlukan pengendalian input pengguna dan **pengesahan**. Flutter menyediakan `Form`, `TextFormField`, validator, dan controller untuk membina dan mengesahkan borang — penting untuk mana-mana aplikasi dengan input pengguna.

## Form dan TextFormField

```dart
final _formKey = GlobalKey<FormState>();   // a key to access the form's state

Form(
  key: _formKey,
  child: Column(children: [
    TextFormField(
      decoration: InputDecoration(labelText: 'Email'),
      validator: (value) {                  // VALIDATION logic
        if (value == null || value.isEmpty) return 'Email required';
        if (!value.contains('@')) return 'Invalid email';
        return null;                         // null = valid
      },
    ),
    ElevatedButton(
      onPressed: () {
        if (_formKey.currentState!.validate()) {   // run all validators
          // all fields valid → submit
        }
      },
      child: Text('Submit'),
    ),
  ]),
)
```

Satu `Form` mengumpulkan medan (melalui `GlobalKey`); setiap `TextFormField` mempunyai **validator** (mengembalikan rentetan ralat jika tidak sah, atau null jika sah); memanggil `validate()` menjalankan semua validator.

## Membaca input: controller

```dart
final _controller = TextEditingController();   // read/control a field's text
// _controller.text → the current value
// remember to _controller.dispose() in dispose()!  (prevent leaks)
```

## Amalan terbaik

```text
✓ VALIDATE input (required, format, length) — show clear error messages
✓ Validate on submit and/or as the user types (autovalidateMode)
✓ Use controllers to read values; DISPOSE them (lifecycle — avoid leaks)
✓ Handle keyboard types (email/number), focus, and submission flow
✓ Provide good UX: clear errors, loading on submit, disable while submitting
```

## Mengapa ia penting

Memahami cara mengendalikan borang dan pengesahan input adalah penting kerana **kebanyakan aplikasi mempunyai borang** (log masuk, daftar, kemasukan data, carian) yang memerlukan pengendalian input pengguna dan pengesahan, jadi ia adalah pengetahuan praktikal yang mesti diketahui.

Borang ialah bahagian aplikasi yang hampir sejagat, dan Flutter menyediakan alat untuk membinanya dengan baik.

Memahami corak **Form dan TextFormField** — mengumpulkan medan dalam `Form` (diakses melalui `GlobalKey`), memberi setiap `TextFormField` satu **validator** (mengembalikan mesej ralat jika tidak sah atau null jika sah), dan memanggil `validate()` untuk menjalankan semua validator — ialah mekanisme teras untuk membina borang yang disahkan.

Memahami **pengesahan** amat penting kerana mengesahkan input pengguna (menyemak medan wajib, format seperti emel, panjang, dan menunjukkan mesej ralat yang jelas) adalah penting untuk kualiti data dan UX yang baik — input yang tidak disahkan membawa kepada data yang buruk dan pengalaman yang lemah.

Memahami **controller** (`TextEditingController` untuk membaca dan mengawal nilai medan, **mengingat untuk dispose mereka** bagi mengelakkan kebocoran — menghubungkan kepada pengetahuan lifecycle) adalah perlu untuk bekerja dengan input.

Memahami **amalan terbaik** (mengesahkan dengan sesuai, menunjukkan ralat yang jelas, mengendalikan jenis papan kekunci dan fokus, dan menyediakan UX penghantaran yang baik seperti keadaan loading dan menyahdayakan semasa penghantaran) mencerminkan pembinaan borang yang terjurus dan teguh.

Memandangkan kebanyakan aplikasi mempunyai borang yang memerlukan pengendalian input dan pengesahan (keperluan yang hampir sejagat), dan memandangkan corak Form/TextFormField/validator Flutter dengan controller ialah cara anda membina dan mengesahkannya, memahami borang dan pengesahan input ialah pengetahuan Flutter yang penting dan kerap digunakan — satu kemahiran teras yang diperlukan dalam hampir setiap aplikasi sebenar yang mengumpul input pengguna, penting untuk kedua-dua ketepatan data (pengesahan) dan pengalaman pengguna, dan asas kepada pembinaan aplikasi Flutter yang berfungsi dan teguh.