Checkbox, Radio, dan Switch

Tiga input pilihan

Flutter punya tiga widget pilihan utama: Checkbox untuk ya/tidak, Radio untuk pilih satu dari beberapa opsi, dan Switch untuk toggle on/off. Ketiganya butuh state boolean (atau enum untuk Radio) yang dikelola di parent.

Checkbox dan Switch

class _PengaturanState extends State<Pengaturan> {
  bool _terimaPromo = false;
  bool _modeGelap = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CheckboxListTile(
          title: const Text('Terima promo via WhatsApp'),
          value: _terimaPromo,
          onChanged: (nilai) => setState(() => _terimaPromo = nilai ?? false),
        ),
        SwitchListTile(
          title: const Text('Mode gelap'),
          secondary: const Icon(Icons.dark_mode),
          value: _modeGelap,
          onChanged: (nilai) => setState(() => _modeGelap = nilai),
        ),
      ],
    );
  }
}

Varian ListTile (CheckboxListTile, SwitchListTile, RadioListTile) sangat praktis karena sudah menyediakan title, subtitle, dan area sentuh yang lebar. onChanged menerima bool? yang nullable, jadi tangani null dengan ?? false.

Radio untuk pilihan ganda

Radio memakai nilai generic. Semua radio dalam satu grup berbagi groupValue yang sama:

enum MetodeBayar { tunai, qris, transfer }

class _BayarState extends State<Bayar> {
  MetodeBayar _metode = MetodeBayar.tunai;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: MetodeBayar.values.map((m) {
        return RadioListTile<MetodeBayar>(
          title: Text(m.name.toUpperCase()),
          value: m,
          groupValue: _metode,
          onChanged: (nilai) {
            if (nilai != null) setState(() => _metode = nilai);
          },
        );
      }).toList(),
    );
  }
}

Memakai enum membuat kode type-safe: tidak ada string typo seperti 'tunai' vs 'Tunai'.

Kapan pakai yang mana?

Pedoman UX-nya: Switch untuk pengaturan yang langsung berlaku (mode gelap, notifikasi), Checkbox untuk pilihan yang butuh konfirmasi atau bisa banyak (topping tambahan), Radio untuk pilih tepat satu dari daftar (metode bayar, jasa kirim). Konsistensi dengan pedoman ini membuat aplikasimu terasa familiar bagi user Android/iOS.

Catatan teknis: Nilai onChanged yang null membuat widget tampil nonaktif. Ini berguna untuk menonaktifkan opsi secara kondisional, misalnya metode QRIS nonaktif saat offline. Tapi pastikan ada penjelasan visual kenapa nonaktif, kalau tidak user akan bingung mengira aplikasinya rusak.