Flutter - Pengantar Gestur

Isyarat pada dasarnya adalah cara bagi pengguna untuk berinteraksi dengan aplikasi seluler (atau perangkat berbasis sentuh apa pun). Gestur umumnya didefinisikan sebagai tindakan / gerakan fisik apa pun dari pengguna yang bermaksud mengaktifkan kontrol tertentu dari perangkat seluler. Gerakan semudah mengetuk layar perangkat seluler hingga tindakan yang lebih kompleks yang digunakan dalam aplikasi game.

Beberapa gerakan yang banyak digunakan disebutkan di sini -

Tap - Menyentuh permukaan perangkat dengan ujung jari sebentar lalu melepaskan ujung jari.
Double Tap - Mengetuk dua kali dalam waktu singkat.
Drag - Menyentuh permukaan perangkat dengan ujung jari lalu gerakkan ujung jari dengan stabil lalu lepaskan ujung jari tersebut.
Flick - Mirip dengan menyeret, tetapi melakukannya dengan cara yang lebih cepat.
Pinch - Menjepit permukaan perangkat menggunakan dua jari.
Spread/Zoom - Kebalikan dari mencubit.
Panning - Menyentuh permukaan perangkat dengan ujung jari dan menggerakkannya ke segala arah tanpa melepaskan ujung jari.

Flutter memberikan dukungan luar biasa untuk semua jenis gerakan melalui widget eksklusifnya, GestureDetector. GestureDetector adalah widget non-visual yang utamanya digunakan untuk mendeteksi isyarat pengguna. Untuk mengidentifikasi isyarat yang ditargetkan pada widget, widget dapat ditempatkan di dalam widget GestureDetector. GestureDetector akan menangkap isyarat dan mengirimkan banyak peristiwa berdasarkan isyarat tersebut.

Beberapa gerakan dan peristiwa terkait diberikan di bawah ini -

onTapDown
onTapUp
onTap
onTapCancel

Tap dua kali

onDoubleTap

Tekan lama

onLongPress

Tarik vertikal

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Tarik horizontal

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

onPanStart
onPanUpdate
onPanEnd

Sekarang, mari kita memodifikasi aplikasi hello world dengan menyertakan fitur deteksi gerakan dan mencoba memahami konsepnya.

Ubah konten tubuh widget MyHomePage seperti yang ditunjukkan di bawah ini -

body: Center( 
   child: GestureDetector( 
      onTap: () { 
         _showDialog(context); 
      }, 
      child: Text( 'Hello World', ) 
   ) 
),

Perhatikan bahwa di sini kita telah menempatkan widget GestureDetector di atas widget Text dalam hierarki widget, menangkap event onTap dan akhirnya menampilkan jendela dialog.
Implementasikan fungsi * _showDialog * untuk menampilkan dialog ketika pengguna membuka pesan hello world . Ia menggunakan generik showDialog dan AlertDialog widget untuk membuat widget dialog baru. Kode ditunjukkan di bawah ini -

// user defined function void _showDialog(BuildContext context) { 
   // flutter defined function 
   showDialog( 
      context: context, builder: (BuildContext context) { 
         // return object of type Dialog
         return AlertDialog( 
            title: new Text("Message"), 
            content: new Text("Hello World"),   
            actions: <Widget>[ 
               new FlatButton( 
                  child: new Text("Close"),  
                  onPressed: () {   
                     Navigator.of(context).pop();  
                  }, 
               ), 
            ], 
         ); 
      }, 
   ); 
}

Aplikasi akan memuat ulang perangkat menggunakan fitur Hot Reload. Sekarang, cukup klik pesan, Hello World dan itu akan menampilkan dialog seperti di bawah ini -

Sekarang, tutup dialog dengan mengklik opsi tutup di dialog.

Kode lengkapnya (main.dart) adalah sebagai berikut -

import 'package:flutter/material.dart'; 
void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget { 
   // This widget is the root of your application.    
   @override 
   Widget build(BuildContext context) {
      return MaterialApp(
         title: 'Hello World Demo Application', 
         theme: ThemeData( primarySwatch: Colors.blue,), 
         home: MyHomePage(title: 'Home page'), 
      ); 
   }
}
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   
   // user defined function 
   void _showDialog(BuildContext context) { 
      // flutter defined function showDialog( 
         context: context, builder: (BuildContext context) { 
            // return object of type Dialog return AlertDialog(
               title: new Text("Message"), 
               content: new Text("Hello World"),   
               actions: <Widget>[
                  new FlatButton(
                     child: new Text("Close"), 
                     onPressed: () {   
                        Navigator.of(context).pop();  
                     }, 
                  ), 
               ],
            );
         },
      );
   }
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(this.title),),
         body: Center(
            child: GestureDetector( 
               onTap: () {
                  _showDialog(context);
               },
            child: Text( 'Hello World', )
            )
         ),
      );
   }
}

Terakhir, Flutter juga menyediakan mekanisme deteksi gerakan tingkat rendah melalui widget Pemroses . Ini akan mendeteksi semua interaksi pengguna dan kemudian mengirimkan peristiwa berikut -

PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent

Flutter juga menyediakan sekumpulan kecil widget untuk melakukan gerakan khusus dan lanjutan. Widget tersebut tercantum di bawah ini -

Dismissible - Mendukung gerakan jentikan untuk menutup widget.
Draggable - Mendukung gerakan seret untuk memindahkan widget.
LongPressDraggable - Mendukung gerakan seret untuk memindahkan widget, ketika widget induknya juga dapat diseret.
DragTarget- Menerima widget yang Dapat Diseret
IgnorePointer - Menyembunyikan widget dan turunannya dari proses deteksi gerakan.
AbsorbPointer - Menghentikan proses deteksi isyarat itu sendiri sehingga widget yang tumpang tindih juga tidak dapat berpartisipasi dalam proses deteksi isyarat dan karenanya, tidak ada acara yang dimunculkan.
Scrollable - Mendukung pengguliran konten yang tersedia di dalam widget.