Interaksi Pengguna: Gesture, InkWell, dan Event Handling

Tujuan Pembelajaran

• Mengenal berbagai gesture pada layar sentuh.
• Menggunakan InkWell dan GestureDetector.
• Menangani tap, long press, dan swipe.
• Menerapkan interaksi pada elemen daftar.

Uraian Materi

Interaksi membuat aplikasi hidup. GestureDetector menangkap berbagai gestur sentuh seperti ketuk (tap), tahan (long press), dan geser (drag/swipe). InkWell menambahkan efek riak air ketika ditekan, lebih khas desain Material.

InkWell(
  onTap: () {
    // aksi saat diketuk
  },
  onLongPress: () {
    // aksi saat ditekan lama
  },
  child: Card(child: Padding(
    padding: const EdgeInsets.all(16),
    child: const Text('Item Menu'),
  )),
)

Berbagi Gesture dengan ListTile

ListTile menyediakan properti onTap secara langsung sehingga tidak perlu membungkus dengan detector. Kombinasi dengan navigation membuat setiap item daftar membuka halaman detail.

Menangani Kejadian pada Form

Event handling juga mencakup aksi tombol Submit dan perubahan nilai. Pola mengikat tombol ke fungsi dan menampilkan umpan balik (misal SnackBar) setelah berhasil diperkenalkan.

ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(content: Text('Data disimpan')),
);

Menghindari Anonymous Function yang Rumit

Agar kode mudah dibaca, aksi kompleks dipindahkan ke method tersendiri, sedangkan lambda inline dipakai untuk aksi singkat. Kebiasaan ini sangat membantu saat kode aplikasi semakin besar.

Latihan Interaksi

Peserta membangun menu yang menampilkan SnackBar saat diketuk, membuka dialog saat ditekan lama, dan menampilkan konfirmasi saat menekan tombol hapus – melatih spektrum interaksi paling umum.

Makna Umpan Balik Visual

Pengaplikasi memberikan umpan balik untuk setiap aksi agar pengguna merasa yakin aksinya diterima. InkWell menampilkan efek riak, sedangkan SnackBar menampilkan notifikasi singkat. Tanpa umpan balik, pengguna dapat menekan tombol berulang kali karena tidak ada indikasi respon.

Menangani Gesture ganda

Satu widget dapat menangkap lebih dari satu gesture, misalnya tap untuk membuka dan long press untuk menu penghapusan. Penggunaan berbeda mengikuti kebiasaan pengguna pada umumnya, dan perlu dipilih secara hati-hati agar tidak membingungkan.

Dialog sebagai Konfirmasi

showDialog menampilkan kotak dialog untuk menyesuaikan pengguna sebelum tindakan yang tidak bisa dibatalkan. Peserta berlatih menyusun dialog sederhana dengan judul, isi, dan tombol opsi, lalu menangkap hasil pilihan pengguna.

Latihan Antarmuka yang Interaktif

Peserta merangkai daftar item yang berinteraksi dengan tiga lapis umpan balik: tap membuka detail, long press menampilkan dialog, dan tombol aksi memunculkan SnackBar. Latihan ini menyatukan gesture, dialog, dan navigasi dalam satu contoh yang nyata dipakai aplikasi.

Aktivitas Pembelajaran

• Menjelaskan macam-macam gesture dan kegunaannya.
• Praktik menggunakan InkWell pada item Card.
• Menerapkan SnackBar sebagai umpan balik.
• Mengimplementasikan tap dan long press pada daftar.

Tugas dan Latihan

• Buat daftar makanan; ketuk item membuka halaman detail.
• Tekan lama item menampilkan dialog konfirmasi hapus.
• Terapkan InkWell dengan efek riak pada tombol utama.

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 Belajar Mandiri

Untuk menguatkan pemahaman, peserta disarankan membaca ulang kode yang telah dibuat, mencoba memodifikasi nilai dan properti, lalu mengamati perubahannya melalui hot reload. Eksperimen kecil-kecil semacam ini membangun intuisi yang tidak diperoleh hanya dari teori.

Kesulitan yang ditemui selama praktik dicatat pada jurnal belajar dan dibawa ke pertemuan berikutnya. Konsistensi belajar mandiri di antara sesi mempercepat penguasaan materi dan membuat praktikum di kelas berjalan lebih efektif.

Ringkasan Pertemuan

Pada pertemuan ke-11 fokus pembelajaran adalah interaksi pengguna: gesture, inkwell, dan event handling. Seluruh indikator tujuan difokuskan pada penguasaan materi tersebut secara praktis, sehingga peserta tidak hanya mengenal konsep tetapi mampu menerapkannya langsung dalam proyek Flutter yang sedang dikembangkan. Ringkasan nilai utama: mengenal berbagai gesture pada layar sentuh..

Kemampuan peserta diukur melalui penyelesaian latihan yang mencerminkan penerapan nyata, bukan sekadar hafalan. Setiap konsep baru selalu dikaitkan dengan materi sebelumnya agar terbentuk pemahaman yang utuh dan berkesinambungan sepanjang kurikulum.

Refleksi Diri

Bagian berikut mengajak peserta menelaah kembali sejauh mana materi telah dikuasai. Kejujuran dalam menilai diri menentukan efektivitas langkah perbaikan selanjutnya.

• Apakah saya dapat menjelaskan kembali pokok materi pertemuan ini tanpa melihat catatan?
• Apakah saya berhasil menyelesaikan seluruh latihan praktikum secara mandiri?
• Bila ada kendala, bagian manakah yang paling sulit dan bagaimana rencana saya mengatasinya?

Asesmen dan Tindak Lanjut

Hasil praktikum dan kuis digunakan untuk memetakan penguasaan peserta. Peserta yang nilainya belum memenuhi kriteria mengulang latihan pada bagian yang kurang dengan pendampingan, sedangkan yang telah menguasai diberikan pengayaan berupa pengembangan fitur tambahan. Catatan perbaikan disampaikan melalui umpan balik tertulis atau lisan.

Kesetiaan mengikuti alur pertemuan demi pertemuan merupakan kunci keberhasilan pengelolaan state dan interaksi pengguna secara dinamis. Materi berikutnya dibangun di atas kompetensi yang telah dicapai, sehingga menuntaskan pembelajaran setiap pertemuan menjadi bagian penting dari pencapaian akhir. Peserta disarankan mempersiapkan diri membaca panduan praktikum sebelum pertemuan berikutnya tiba.

Dengan selesainya pertemuan ini, peserta menambah satu kompetensi pada peta belajar Mobile Programming. Kemajuan itu dicatat dan menjadi dasar penilaian akhir serta bahan diskusi proyek yang menutup keseluruhan kurikulum.