Bentuk Input Lanjutan: DatePicker, TimePicker, dan Slider

12 Okt 2026kribbiadminMobile Programming

Tujuan Pembelajaran

Menggunakan DatePicker dan TimePicker untuk input tanggal/waktu.
Menggunakan Slider untuk input angka bernilai rentang.
Menggunakan Stepper dan SegmentedButton.
Menampilkan hasil pemilihan pada antarmuka.

Uraian Materi

Tidak semua input berbentuk teks. Aplikasi nyata kerap membutuhkan pemilihan tanggal, waktu, dan angka dalam rentang. showDatePicker menampilkan dialog kalender yang mudah digunakan.

final picked = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
);
if (picked != null) {
  setState(() => tglLahir = picked);
}

TimePicker dan Slider

showTimePicker menyediakan dialog pemilih jam. Slider mengisi nilai numerik yang terus berubah dalam rentang tertentu, misal skor penilaian atau tingkat kepuasan.

Slider(
  min: 1,
  max: 10,
  divisions: 9,
  label: skor.toString(),
  value: skor,
  onChanged: (v) => setState(() => skor = v.toInt()),
)

Format Tanggal dan Waktu

Nilai DateTime ditampilkan dengan format yang rapi menggunakan package intl (misal DateFormat('dd-MM-yyyy')), sehingga tampilan menjadi jamak dan mudah dibaca. Peserta menambahkan dependensi intl pada pubspec.

Input Terbaru: SegmentedButton

SegmentedButton adalah alternatif modern untuk pilihan dalam satu baris, menggantikan pola radio klasik. Penggunaannya sederhana dengan daftar ButtonSegment dan properti selected.

Menggabungkan dalam Form

Praktik membangun form pemesanan yang memadukan DatePicker (tanggal), segmented button (jenis layanan), Slider (jumlah), dan TextFormField – menutup materi berbagai bentuk input secara utuh.

Memahami DateTime dan Pemformatan

Nilai tanggal disimpan sebagai DateTime, bukan sekadar teks. Karena format bawaan sering tidak ramah pengguna, pemformatan dilakukan dengan package intl, misalnya menjadi ’15 Maret 2026′. Peserta berlatih memilih format yang sesuai budaya lokal.

Batasan Rentang Tanggal

showDatePicker menerima firstDate dan lastDate untuk membatasi tanggal yang boleh dipilih. Pembatasan ini mencegah input tidak masuk akal, misalnya tanggal lahir di masa depan. Peserta menentukan rentang yang tepat sesuai konteks formnya.

Keunggulan Slider untuk Rentang

Slider mempermudah pengguna memilih angka tanpa mengetik, sehingga mengurangi kesalahan. Properti divisions menentukan tingkat presisi, misalnya 9 pembagian untuk nilai kelipatan satu. Label menampilkan nilai terpilih sebagai umpan balik langsung.

Mengombinasikan Beragam Input

Pertemuan menutup modul bentuk input dengan latihan memadukan seluruh komponen: kalender, jam, slider, dan pilihan segmen dalam satu form. Hasilnya dirangkum dalam ringkasan yang siap dibawa ke materi form kompleks dan penyimpanan data.

Aktivitas Pembelajaran

Menyimak demonstrasi DatePicker dan TimePicker.
Praktik memilih dan menampilkan tanggal.
Menerapkan Slider pada input skor.
Menggunakan SegmentedButton dan menampilkan hasil.

Tugas dan Latihan

Buat form pemesanan: tanggal (DatePicker), jam (TimePicker), jumlah orang (Slider), dan jenis layanan (SegmentedButton).
Format tampilan tanggal dengan package intl.
Rangkum hasil pilihan pada halaman ringkasan.

Evaluasi

Evaluasi dilakukan melalui pengamatan hasil praktikum, kuis singkat di akhir pertemuan, dan pemantauan proyek. Peserta yang belum mencapai indikator tertentu diberikan remedial melalui bimbingan ulang dan latihan tambahan pada pertemuan berikutnya.

Panduan umum praktik, catatan belajar, dan refleksi tersedia di Panduan Belajar Kribbi Study.