Materi hari ketiga training

Materi Pelatihan Flutter: Hari 3 - Formulir dan Validasi

https://docs.google.com/presentation/d/1Q12vvZLpb9bNfuAkoC8_JyTY87H0A7RU2i7xJH1lq_M/edit?usp=sharing

Waktu Pelatihan: 2-4 Jam

1. Penanganan Formulir Lanjutan

a. Menggunakan Widget Form dan FormField

Form: Widget yang digunakan untuk mengelompokkan beberapa elemen input seperti TextField, Checkbox, dan lainnya. Form menyediakan cara untuk memvalidasi dan mengelola seluruh elemen input sekaligus.
FormField: Basis dari input field dalam Form, seperti TextFormField yang merupakan turunan dari FormField.

Contoh Implementasi:

class RegistrationForm extends StatefulWidget {
@override
_RegistrationFormState createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<RegistrationForm> {
final _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    child: Column(
      children: <Widget>[
        TextFormField(
          decoration: InputDecoration(labelText: 'Email'),
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Email tidak boleh kosong';
            }
            return null;
          },
        ),
        TextFormField(
          decoration: InputDecoration(labelText: 'Password'),
          obscureText: true,
          validator: (value) {
            if (value == null || value.length < 6) {
              return 'Password harus terdiri dari minimal 6 karakter';
            }
            return null;
          },
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            if (_formKey.currentState!.validate()) {
              // Jika semua field valid, proses lebih lanjut
            }
          },
          child: Text('Daftar'),
        ),
      ],
    ),
  );
}
}

b. Penanganan Beberapa Field Form

Mengelola Banyak Field: Dalam satu form, bisa ada banyak field seperti email, password, dan konfirmasi password. Setiap field harus memiliki validator dan dikumpulkan sebelum pengiriman.
Contoh dengan Multiple Fields: Selain email dan password, tambahkan konfirmasi password dan handle perbedaan input dengan validasi yang sesuai.

2. Validasi

a. Implementasi Validasi Field

Validator Bawaan: Validator untuk memeriksa apakah field kosong, panjang teks, format email, dll. Ini bisa diterapkan dengan mudah melalui properti validator di TextFormField.
Validator Kustom: Validator yang dibuat sesuai kebutuhan, misalnya untuk memeriksa format tertentu atau membandingkan dua nilai (seperti password dan konfirmasi password).

Contoh Validator Kustom:

String? _validatePassword(String? value) {
if (value == null || value.length < 6) {
  return 'Password harus terdiri dari minimal 6 karakter';
}
return null;
}

b. Menggunakan Validator Bawaan dan Kustom

Terapkan validator langsung di TextFormField.
Gunakan validator kustom untuk keperluan spesifik seperti mencocokkan konfirmasi password.

3. Peningkatan UI

a. Menambahkan Umpan Balik Visual untuk Kesalahan Validasi

Pesan Kesalahan: Tampilkan pesan kesalahan langsung di bawah field jika validasi gagal.
Styling: Gunakan properti seperti errorText dan helperText pada InputDecoration untuk memberikan umpan balik visual.

Contoh Styling Field:

TextFormField(
decoration: InputDecoration(
  labelText: 'Email',
  border: OutlineInputBorder(),
  errorText: _emailError,
),
validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Email tidak boleh kosong';
  }
  return null;
},
)

b. Mengatur Tampilan Formulir dan Tombol

Gaya Formulir: Tambahkan padding, margin, dan border pada elemen form.
Gaya Tombol: Ubah warna, ukuran, dan bentuk tombol agar lebih menarik dan sesuai dengan tema aplikasi.

4. Widget Interaktif

a. Bekerja dengan Checkbox, Switch, dan RadioButton

Checkbox: Digunakan untuk pilihan biner, misalnya "Setuju dengan syarat dan ketentuan".
Switch: Mirip dengan Checkbox, tetapi dalam bentuk saklar.
RadioButton: Digunakan untuk pilihan tunggal di antara beberapa opsi.

Contoh Implementasi Checkbox:

bool _isChecked = false;

CheckboxListTile(
title: Text("Setuju dengan syarat dan ketentuan"),
value: _isChecked,
onChanged: (newValue) {
  setState(() {
    _isChecked = newValue!;
  });
},
controlAffinity: ListTileControlAffinity.leading,
)

b. Mengintegrasikan Widget Interaktif ke dalam Formulir

Menggunakan Checkbox dalam Form: Tambahkan checkbox untuk syarat dan ketentuan yang harus dicentang sebelum pengguna bisa mendaftar.
RadioButton dan Switch: Gunakan untuk pilihan lain yang relevan, seperti memilih jenis kelamin atau menerima pemberitahuan.

Kesimpulan

Pada hari ketiga pelatihan ini, peserta belajar bagaimana mengelola form yang lebih kompleks, termasuk validasi yang lebih mendalam, styling yang lebih baik, dan integrasi widget interaktif. Dengan pemahaman ini, peserta dapat membuat form yang user-friendly dan fungsional di aplikasi Flutter mereka.

peltops / e-imunisasi

Materi hari ketiga training #162