Peta Materi BAB 7

Inilah perjalanan kita. Setiap "pemberhentian" adalah satu widget input yang akan membuat aplikasimu hidup.

Tujuan Pembelajaran

TextField

TextField adalah widget untuk menerima input teks dari pengguna — seperti kolom nama, email, atau kata sandi.

main.dart — TextField dasar
TextField(
  decoration: InputDecoration(
    labelText: 'Nama Lengkap',
    hintText: 'Tulis namamu di sini',
    border: OutlineInputBorder(),
  ),
  onChanged: (value) {
    print('User mengetik: $value');
  },
)

TextField Lanjutan

TextField bisa "dirias" dan "dikendalikan": hint, controller, dan style.

controller + style
final nameCtrl = TextEditingController();

TextField(
  controller: nameCtrl,
  obscureText: false, // true = mode password
  style: TextStyle(color: Colors.white),
  decoration: InputDecoration(
    hintText: 'Masukkan email',
    prefixIcon: Icon(Icons.email),
    filled: true,
  ),
)

// Membaca isi field kapan saja:
print(nameCtrl.text);

TextFormField

TextFormField = TextField + kemampuan validasi. Ia dipakai di dalam sebuah Form.

TextFormField + validator
TextFormField(
  decoration: InputDecoration(
    labelText: 'Email',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Email tidak boleh kosong';
    }
    return null; // null artinya VALID
  },
)

Validator

Validator adalah satpam input: ia memeriksa data sebelum diterima. Return null = lolos, return teks = pesan error.

validator lengkap
validator: (value) {
  if (value == null || value.isEmpty) {
    return 'Wajib diisi';
  }
  if (!value.contains('@')) {
    return 'Email harus mengandung @';
  }
  if (value.length < 5) {
    return 'Terlalu pendek';
  }
  return null; // semua aturan lolos
}

Dropdown

DropdownButton membiarkan user memilih satu opsi dari daftar yang muncul ke bawah.

DropdownButton
String? pilihan;
final list = ['SMA', 'SMK', 'MA'];

DropdownButton<String>(
  value: pilihan,
  hint: Text('Pilih jenjang'),
  items: list.map((j) {
    return DropdownMenuItem(
      value: j, child: Text(j),
    );
  }).toList(),
  onChanged: (val) {
    setState(() => pilihan = val);
  },
)

Checkbox

Checkbox adalah pilihan ya / tidak (true / false). Bisa banyak yang dicentang sekaligus.

CheckboxListTile
bool setuju = false;

CheckboxListTile(
  title: Text('Saya setuju syarat & ketentuan'),
  value: setuju,
  onChanged: (val) {
    setState(() => setuju = val!);
  },
)

Radio Button

Radio memaksa user memilih hanya satu dari beberapa opsi — sisanya otomatis batal.

Radio<String>
String? gender;

Radio<String>(
  value: 'L',
  groupValue: gender,
  onChanged: (val) => setState(() => gender = val),
),
Radio<String>(
  value: 'P',
  groupValue: gender,
  onChanged: (val) => setState(() => gender = val),
),

Date Picker

showDatePicker memunculkan kalender agar user memilih tanggal — misalnya tanggal lahir.

showDatePicker (async / await)
DateTime? tanggal;

Future<void> pilihTanggal() async {
  final hasil = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2030),
  );
  if (hasil != null) {
    setState(() => tanggal = hasil);
  }
}

Time Picker

showTimePicker memunculkan jam agar user memilih waktu — misalnya jam janji temu.

showTimePicker
TimeOfDay? waktu;

Future<void> pilihWaktu() async {
  final hasil = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  if (hasil != null) {
    setState(() => waktu = hasil);
  }
}

// Menampilkan: waktu!.format(context)

Form Validation — Alur Lengkap

Saat tombol Submit ditekan, Flutter menjalankan SEMUA validator sekaligus. Inilah alurnya.

GlobalKey & FormState

Tiga bahan utama: GlobalKey, widget Form, dan pemanggilan .validate().

struktur Form lengkap
final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        validator: (v) =>
          v!.isEmpty ? 'Wajib diisi' : null,
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // semua field valid → lanjut
            ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(
                content: Text('Berhasil!'),
              ));
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

Menggabungkan Semua dalam 1 Form

Sekarang kita rangkai TextFormField, Dropdown, Checkbox, dan Radio menjadi satu form hidup.

form gabungan
Form(
  key: _formKey,
  child: Column(children: [
    TextFormField(
      decoration: InputDecoration(labelText: 'Nama'),
      validator: (v) => v!.isEmpty ? 'Isi nama' : null,
    ),
    DropdownButtonFormField<String>(
      decoration: InputDecoration(labelText: 'Jenjang'),
      items: ['SMA','SMK','MA'].map((e) =>
        DropdownMenuItem(value: e, child: Text(e))
      ).toList(),
      validator: (v) => v == null ? 'Pilih jenjang' : null,
      onChanged: (v) {},
    ),
    CheckboxListTile(
      title: Text('Setuju S&K'),
      value: setuju,
      onChanged: (v) => setState(() => setuju = v!),
    ),
  ]),
)

Form Pendaftaran Siswa

Proyek puncak BAB 7: satu form pendaftaran lengkap yang memakai semua widget yang kita pelajari.

Struktur Form

Kita siapkan StatefulWidget, variabel state, dan kerangka Form-nya.

form_pendaftaran.dart — bagian 1/2
class FormPendaftaran extends StatefulWidget {
  @override
  State<FormPendaftaran> createState() => _FormPendaftaranState();
}

class _FormPendaftaranState extends State<FormPendaftaran> {
  final _formKey = GlobalKey<FormState>();
  final namaCtrl = TextEditingController();
  final emailCtrl = TextEditingController();

  String? jenjang;       // untuk Dropdown
  String? gender;        // untuk Radio
  DateTime? tglLahir;    // untuk Date Picker
  bool setuju = false;   // untuk Checkbox

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pendaftaran Siswa')),
      body: Form(
        key: _formKey,
        child: ListView(
          padding: EdgeInsets.all(16),
          children: [
            TextFormField(
              controller: namaCtrl,
              decoration: InputDecoration(labelText: 'Nama Lengkap'),
              validator: (v) => v!.isEmpty ? 'Nama wajib diisi' : null,
            ),
            TextFormField(
              controller: emailCtrl,
              decoration: InputDecoration(labelText: 'Email'),
              validator: (v) =>
                !v!.contains('@') ? 'Email tidak valid' : null,
            ),
            DropdownButtonFormField<String>(
              decoration: InputDecoration(labelText: 'Jenjang'),
              value: jenjang,
              items: ['SMA','SMK','MA'].map((e) =>
                DropdownMenuItem(value: e, child: Text(e))).toList(),
              validator: (v) => v == null ? 'Pilih jenjang' : null,
              onChanged: (v) => setState(() => jenjang = v),
            ),
            // ... lanjut ke Bagian 2
          ],
        ),
      ),
    );
  }
}

Validasi + Submit

Radio, Checkbox, dan tombol Daftar yang menjalankan validasi seluruh form.

form_pendaftaran.dart — bagian 2/2
// (lanjutan children ListView)

// --- Radio Jenis Kelamin ---
Row(children: [
  Radio<String>(value: 'L', groupValue: gender,
    onChanged: (v) => setState(() => gender = v)),
  Text('Laki-laki'),
  Radio<String>(value: 'P', groupValue: gender,
    onChanged: (v) => setState(() => gender = v)),
  Text('Perempuan'),
]),

// --- Checkbox Persetujuan ---
CheckboxListTile(
  title: Text('Saya setuju syarat & ketentuan'),
  value: setuju,
  onChanged: (v) => setState(() => setuju = v!),
),

// --- Tombol Daftar ---
ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate() && setuju) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(
          'Selamat datang, ${namaCtrl.text}!')),
      );
    } else if (!setuju) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Centang persetujuan dulu')),
      );
    }
  },
  child: Text('Daftar Sekarang'),
),

Rangkuman BAB 7

Tugas Individu

Tugas Kelompok

Challenge Proyek

🎓 Selamat! Kamu telah menyelesaikan BAB 7 — Form & Input User.