Tappable Widget: GestureDetector atau InkWell Manakah yang Lebih Baik?

Anda sedang memulai mengembangkan proyek Flutter? Membutuhkan widget yang dapat mengeksekusi aksi dari pengguna? Tidak ingin menggunakan widget button karena akan menampilkan custom widget atau efek?

Tenang saja! Flutter memberikan kita kemudahan untuk mengembangkan aplikasi sesuai kebutuhan kita, termasuk ketika kita perlu meningkatkan interaksi dengan pengguna melalui penggunaan widget. Harapannya semakin besar interaksi pengguna dengan aplikasi, semakin antusias mereka untuk memakai aplikasi tersebut. Akhirnya, mereka akan menjadi pengguna yang lebih loyal.

Kita ambil contoh untuk memproses data pengguna dengan tujuan agar aplikasi yang dibuat bisa sesuai dengan preferensi pengguna. Ini dapat dilakukan dengan mencari tahu widget mana yang mereka sentuh atau tekan. Ini sama halnya ketika pengguna menekan tombol, icon, checkboxes dan teks atau ketika pengguna menggeser, menahan, bahkan mencubit suatu widget.

Nah mari kita bahas widget apa saja yang bisa kita gunakan untuk meningkatkan interaksi aplikasi dengan pengguna.

Tappable Widget

Widget yang dapat ditekan (tappable widget) bertujuan menginformasikan aplikasi bahwa pengguna sedang berinteraksi dengan widget tersebut dan akan menjalankan function yang ada. Contoh sederhana dari function ini adalah proses navigasi ke halaman lain. Hal ini juga dimiliki oleh GestureDetector dan InkWell dengan fitur onTap(). Tidak seperti widget button yang telah dibuat untuk menampilkan tombol secara default, GestureDetector dan InkWell merupakan non-visual widget yang tidak akan menampilkan dirinya melainkan widget turunan yang dimiliki.

Di Flutter, ada dua jenis tappable widget yang dapat kita gunakan, yaitu GestureDoctor dan InkWell. Saya akan membahasnya satu per satu.

GestureDetector

Sesuai dengan namanya, widget ini berfungsi untuk mendeteksi gerakan interaksi dari pengguna. Selain itu, ada banyak sekali fungsi yang dimiliki oleh GestureDetector.

Contoh di atas adalah sebagian dari fungsi GestureDetector. Masih banyak lagi fungsi yang dapat mendeteksi interaksi pengguna. Berikut merupakan contoh code GestureDetector dan hasilnya.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        title: const Text('Contoh GestureDetector'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            InkWell(
              child: const Text('Contoh Text',),
              onTap: () => _incrementCounter(),
            ),
            InkWell(
              child: const Icon(Icons.arrow_forward),
              onTap: () => _incrementCounter(),
            ),
            InkWell(
              child: Image.asset('images/cat-blush-circle.png'),
              onTap: () => _incrementCounter(),
            ),
            Text('Gesture ditekan sebanyak $_counter'),
          ],
        ),
      ),
    );
  }
}

InkWell

Widget ini merupakan turunan dari GestureDetector dengan fungsi utama yang sama, yaitu untuk mendeteksi interaksi pengguna. Namun, InkWell hanya memiliki beberapa fungsi saja dan lebih menonjolkan tampilan dari widget. Fungsi utama lainnya adalah efek ombak (ripple effect) yaitu sebuah animasi yang akan muncul ketika pengguna menekan sebuah tombol. Hal ini membuat pengguna sadar bahwa mereka menekan widget yang tepat.

Karena menerapkan efek Ripple, InkWell secara otomatis akan memberikan area widget lebih yang dapat ditekan untuk mengisi area kosong pada child widget. Area tambahan ini akan membentuk kotak sesuai dengan ukuran dari child widget. Jika kita gambarkan area yang dapat ditekan berwarna biru maka kita bisa melihat contoh di bawah ini.

Berikut merupakan contoh code InkWell dan hasilnya.

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('Contoh InkWell'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            InkWell(
              child: const Text('Contoh Text',),
              onTap: () => _incrementCounter(),
            ),
            InkWell(
              child: const Icon(Icons.arrow_forward),
              onTap: () => _incrementCounter(),
            ),
            InkWell(
              child: Image.asset('images/cat-blush-circle.png'),
              onTap: () => _incrementCounter(),
            ),
            Text('InkWell ditekan sebanyak $_counter'),
          ],
        ),
      ),
    );
  }
}

Ringkasan

Pada akhirnya keputusan penggunaan widget-widget di atas sangat bergantung dari kebutuhan fitur aplikasi yang akan kita buat. Dengan mengetahui kegunaan masing-masing, kita dapat dengan bijaksana dalam memilih widget yang sesuai.

Misalnya, jika kita ingin mengetahui interaksi atau pilihan pengguna kita dapat menggunakan widget GestureDetector dan InkWell. Jika ingin membuat widget yang kompleks, GestureDetector merupakan pilihan yang tepat, terutama jika ingin mendapatkan gerakan pengguna secara beragam.

Jika ingin menambahkan efek Ripple, gunakan widget InkWell yang telah menyediakan fungsi animasi. InkWell juga dapat digunakan jika kita mempunyai child widget berupa icon yang terlalu kecil atau garis, sehingga area yang dapat ditekan akan lebih luas dan akan memudahkan pengguna dalam berinteraksi dengan aplikasi.

Apabila hanya ingin mengetahui interaksi pengguna saja tanpa menambahkan efek Ripple, disarankan menggunakan widget GestureDetector karena lebih ringan. Dengan menggunakan widget yang lebih ringan, kita dapat meminimalisir penggunaan memori pada aplikasi.