Mengetuk Area Putih pada Child Widget GestureDetector

Aslinya dipublikasikan di sini

Membangun aplikasi dengan UI yang bersih membuat pengguna lebih mudah berinteraksi dengan aplikasi tersebut. Mengelola white space adalah salah satu kunci utama untuk mencapai desain yang bersih. Meskipun white space secara teknis kosong, ia tetap dapat memiliki fungsi yang berarti. Dalam artikel ini, saya akan menunjukkan cara membuat white space di dalam widget GestureDetector pada Flutter menjadi interaktif.

White Space yang Tidak Responsif

Saya baru-baru ini mengimplementasikan desain menu menggunakan widget GestureDetector di Flutter. Meskipun label menu dan ikon merespons ketukan sesuai harapan, mengetuk white space tidak memicu aksi apapun.

Di sini, saya akan menunjukkan cara saya mengatasi masalah tersebut. Ini adalah solusi sederhana yang sudah disediakan oleh Flutter. Mari kita buat UI sederhana yang mirip dengan masalah tersebut.

Kita akan membuat menu akun. Saat diketuk, menu ini akan merespons dengan menampilkan pesan pada snack bar.

Berikut kodenya:

GestureDetector(
  onTap: () {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Account')),
    );
  },
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      const Padding(
        padding: EdgeInsets.all(8),
        child: Icon(Icons.person),
      ),
      Text(
        'Account',
        style: Theme.of(context).textTheme.bodyLarge,
      ),
    ],
  ),
)

Mari kita jalankan kode di atas. Kita akan melihat bahwa tidak ada yang terjadi saat mengetuk white space antara ikon dan label akun.

Memahami HitTestBehavior

Sebelum membahas penyebab masalah dan solusinya, mari kita pahami apa itu HitTestBehavior. Ini adalah kelas enumerasi yang membantu widget GestureDetector menentukan cara merespons selama hit testing. Hit testing adalah proses yang digunakan untuk menentukan elemen UI apa saja yang berada pada posisi tertentu di layar.

Jenis-jenis HitTestBehavior

deferToChild

Ini adalah perilaku default. Artinya, child dari widget GestureDetector yang menentukan apakah akan bereaksi terhadap ketukan atau tidak.

behavior: HitTestBehavior.deferToChild,

translucent

GestureDetector akan merespons event dalam batasnya, tetapi juga memungkinkan target yang berada di belakangnya secara visual untuk menerima event. Ini sangat berguna ketika Anda memiliki elemen yang saling tumpang tindih.

behavior: HitTestBehavior.translucent,

opaque

GestureDetector mengonsumsi event dan mencegah elemen di belakangnya secara visual untuk menerimanya.

behavior: HitTestBehavior.opaque

Solusi

Setelah memahami HitTestBehavior, kita tahu alasan mengapa mengetuk white space tidak memicu aksi apapun. Hal ini karena perilaku default pada GestureDetector adalah HitTestBehavior.deferToChild.

Jadi, untuk mengatasinya, kita harus mengatur properti behavior pada GestureDetector menjadi HitTestBehavior.translucent atau HitTestBehavior.opaque.

GestureDetector(
  behavior: HitTestBehavior.translucent, // atau HitTestBehavior.opaque
  ...
)

Mari kita jalankan kode yang sudah diperbaiki.

Kesimpulan

Menggunakan HitTestBehavior yang tepat dapat membuat aplikasi Flutter Anda lebih intuitif dan ramah pengguna dengan memanfaatkan white space secara efektif.