Gestures di Flutter

View Categories

Gestures di Flutter

Gestures atau gerakan tangan digunakan untuk berinteraksi dengan aplikasi. Biasanya digunakan pada perangkat yang menggunakan layar sentuh untuk berinteraksi secara fisik dengan aplikasi. Gerakan tersebut dapat berupa sekali ketukan pada layar hingga interaksi fisik yang lebih kompleks seperti menggeser ke arah tertentu hingga menggulirkan aplikasi. Gerakan tersebut sangat digunakan dalam permainan dan hampir setiap aplikasi membutuhkannya untuk berfungsi karena perangkat semakin banyak yang menggunakan layar sentuh. Dalam artikel ini, kami akan membahasnya secara rinci.

Beberapa gerakan yang sering digunakan antara lain:

  • Tap: Menyentuh permukaan perangkat dengan ujung jari selama beberapa saat dan akhirnya melepaskan ujung jari.
  • Double Tap: Mengetuk dua kali dalam waktu singkat.
  • Drag: Menyentuh permukaan perangkat dengan ujung jari dan kemudian menggerakkan ujung jari secara perlahan dan akhirnya melepaskan ujung jari.
  • Flick: Sama seperti drag, namun dilakukan dengan kecepatan yang lebih tinggi.
  • Pinch: Memiringkan permukaan perangkat menggunakan dua jari atau melakukan gerakan mencubit pada layar perangkat.
  • Zoom: Kebalikan dari pinch.
  • Panning: Menyentuh permukaan perangkat dengan ujung jari dan menggerakkannya ke arah yang diinginkan tanpa melepaskan ujung jari.

Widget GestureDetector pada Flutter digunakan untuk mendeteksi interaksi fisik dengan aplikasi pada UI. Jika sebuah widget harus mengalami gerakan, maka widget tersebut ditempatkan di dalam widget GestureDetector. Widget yang sama menangkap gerakan tersebut dan mengembalikan tindakan atau respons yang tepat.

Berikut adalah daftar gerakan dan event yang sesuai dengan gerakan tersebut:

Tap

  • onTapDown
  • onTapUp
  • onTap
  • onTapCancel

Double tap

  • onDoubleTap

Long press

  • onLongPress

Vertical drag

  • onVerticalDragStart
  • onVerticalDragUpdate
  • onVerticalDragEnd

Horizontal drag

  • onHorizontalDragStart
  • onHorizontalDragUpdate
  • onHorizontalDragEnd

Pan

  • onPanStart
  • onPanUpdate
  • onPanEnd

 

Contoh:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'Gestures';

    return const MaterialApp(
      title: title,
      home: MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
      ),
      body: const Center(child: MyButton()),
    );
  }
}

class MyButton extends StatelessWidget {
  const MyButton({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    showSnackbar(Color color, String message) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          backgroundColor: color,
          content: Text(message),
        ),
      );
    }

    return GestureDetector(
      // untuk menampilkan snackbar ketika melakukan gesture
      onTap: () {
        showSnackbar(Colors.black, 'Kamu telah melakukan Tapped pada Button');
      },
      onDoubleTap: () {
        showSnackbar(
            Colors.purple, 'Kamu telah melakukan Double Tapped pada Button');
      },
      onLongPress: () {
        showSnackbar(
            Colors.green, 'Kamu telah melakukan Long Press pada Button');
      },
      // Button Tap
      child: Container(
        padding: const EdgeInsets.all(12.0),
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(8.0),
        ),
        child: const Text('Tap Button'),
      ),
    );
  }
}

Output:

Flutter mendukung widget Listener yang merupakan mekanisme deteksi gestur low-level. Widget ini mendeteksi interaksi pengguna dan mengirimkan salah satu dari event yang disebutkan di bawah ini:

  • PointerDownEvent
  • PointerMoveEvent
  • PointerUpEvent
  • PointerCancelEvent

Flutter juga memiliki widget khusus dan canggih untuk melakukan gestur tertentu. Widget-widget ini adalah sebagai berikut:

  • Dismissible: Mendukung gestur flick untuk menghentikan widget.
  • Draggable: Mendukung gestur drag untuk membuat widget dapat dipindahkan.
  • LongPressDraggable: Jika widget induk dapat di-drag, mendukung gestur drag untuk memindahkan widget children.
  • DragTarget: Menerima widget Draggable.
  • IgnorePointer: Ketika digunakan, widget dan anaknya yang sesuai disembunyikan dari proses deteksi gestur.
  • AbsorbPointer: Menghentikan proses deteksi gestur itu sendiri untuk menghindari tindakan yang dikirimkan pada widget yang tumpang tindih.
  • Scrollable: Membuat konten yang tersedia di dalam widget dapat di-scroll.

Tutorial sebelumnya : Flutter Form Validator
Tutorial setelahnya : Membuka URL Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan