Last Updated on April 17, 2023 by
Flutter Gestures pada hakikatnya adalah cara bagi pengguna untuk berinteraksi dengan aplikasi seluler (atau perangkat berbasis sentuhan apa pun). Gestur secara umum didefinisikan sebagai tindakan / gestures fisik apa pun dari pengguna dengan maksud untuk mengaktifkan kontrol tertentu pada perangkat seluler.
Gestures banyak digunakan dalam permainan dan kurang lebih setiap aplikasi membutuhkannya untuk berfungsi karena perangkat menjadi lebih berbasis sentuhan daripada sebelumnya. Pada artikel ini, kita akan membahas belajar flutter gestures secara rinci.
Table of Contents
Flutter Gestures
Gestures digunakan untuk berinteraksi dengan aplikasi. Ini umumnya digunakan pada perangkat berbasis sentuhan untuk berinteraksi secara fisik dengan aplikasi. Gerakan bisa sesederhana satu tapan di layar ke interaksi fisik yang lebih kompleks seperti menggesek ke arah tertentu untuk menggulir ke bawah aplikasi.
Flutter Gestures adalah fitur menarik di Flutter yang memungkinkan kita berinteraksi dengan aplikasi seluler (atau perangkat berbasis sentuhan apa pun). Secara umum, isyarat mendefinisikan tindakan atau gerakan fisik apa pun dari pengguna dengan maksud untuk mengontrol perangkat seluler secara spesifik. Beberapa contoh gestur adalah:
- Saat layar ponsel terkunci, geser jari Anda di layar untuk membukanya.
- Mengetuk tombol di layar ponsel Anda, dan
- Mengetuk dan menahan ikon aplikasi pada perangkat berbasis sentuhan untuk mendrag melintasi layar.
Beberapa gestures yang banyak digunakan disebutkan di sini:
- Tap: Menyentuh permukaan perangkat dengan ujung jari untuk jangka waktu singkat dan akhirnya melepaskan ujung jari.
- Double Tap : Mengetuksebanyak dua kali dengan cepat.
- Drag: Menyentuh permukaan perangkat dengan ujung jari lalu menggerakkan ujung jari dengan mantap dan terakhir melepaskan ujung jari.
- Flick: Mirip dengangerakan menyeret, tetapi melakukannya dengan lebih cepat lagi.
- Pinch: Mencubit permukaan perangkat menggunakan dua jari.
- Zoom: Kebalikan dari pinch.
- Panning: Menyentuh permukaan perangkat dengan ujung jari dan menggerakkannya ke arah yang diinginkan tanpa melepaskan ujung jari.
Kita menggunakan semua gesture ini dalam kehidupan sehari-hari untuk berinteraksi dengan ponsel atau perangkat berbasis sentuhan Anda.
Flutter membagi sistem isyarat menjadi dua lapisan yang berbeda, yang diberikan di bawah ini:
- Pointer
- Gestures
Pointer
Pointer adalah lapisan pertama yang mewakili data mentah tentang interaksi pengguna. Ini memiliki acara, yang menggambarkan lokasi dan pergerakan pointer seperti sentuhan, mouse, dan gaya di layar. Flutter tidak menyediakan mekanisme apa pun untuk membatalkan atau menghentikan pengiriman peristiwa penunjuk lebih lanjut. Flutter menyediakan widget Listener untuk mendengarkan pointer-events langsung dari layer widget. Pointer-event dikategorikan menjadi empat jenis:
- PointerDownEvents: Pointer ini memungkinkan penunjuk untuk menghubungi layar di lokasi tertentu.
- PointerMoveEvents: Jenis ini memungkinkan penunjuk untuk berpindah dari satu lokasi ke lokasi lain di layar.
- PointerUpEvents: Memungkinkan penunjuk untuk berhenti menyentuh layar.
- PointerCancelEvents: Acara ini dikirim saat interaksi pointer dibatalkan.
Flutter Gestures
Gestures adalah lapisan kedua yang mewakili tindakan semantik seperti tap, drag, dan skala, yang dikenali dari beberapa peristiwa penunjuk individu. Itu juga dapat mengirimkan beberapa acara yang sesuai dengan siklus hidup gerakan seperti awal drag, pembaruan drag, dan drag akhir. Beberapa gerakan yang populer digunakan tercantum di bawah ini:
- Tap: Artinya menyentuh permukaan layar dari ujung jari sebentar lalu melepaskannya. Gerakan ini berisi acara berikut:
- onTapDown
- onTapUp
- onTap
- onTapCancel
- Double Tap: Ini mirip dengan gerakan Tap, tetapi Anda perlu mengetuk dua kali dalam waktu singkat. Gerakan ini berisi acara berikut:
- onDoubleTap
- Drag: Ini memungkinkan kita menyentuh permukaan layar dengan ujung jari dan memindahkannya dari satu tempatke tempat lainnya lalu melepaskannya. Flutter Gestures mengkategorikan drag menjadi dua jenis:
- Drag Horizontal: Gerakan ini memungkinkan penunjuk bergerak ke arah horizontal. Ini berisi acara berikut:
- Drag Vertikal: Gerakan ini memungkinkan penunjuk bergerak ke arah vertikal.
- Long Press: Artinya menyentuh permukaan layar di lokasi tertentu untuk waktu yang lama. Gerakan ini berisi acara berikut:
- onLongPress
- Pan : Artinya menyentuh permukaan layar dengan ujung jari, yang dapat dipindahkanke segala arah tanpa melepaskan ujung jari. Gerakan ini berisi acara berikut:
- onPanStart
- onPanUpdate
- onPanEnd
- Pinch: Ini berarti mencubit (menggerakkan satu jari dan ibu jari atau menyatukannya di layar sentuh) permukaan layar menggunakan dua jari untuk memperbesar atau memperkecil layar.
Detektor Flutter Gestures
Flutter menyediakan widget yang menawarkan dukungan luar biasa untuk semua jenis gestur dengan menggunakan widget Flutter Gestures Detector . Gesture Widget adalah widget non-visual, yang terutama digunakan untuk mengenali gerakan pengguna. Ide dasar dari detektor gerakan adalah stateless yang berisi parameter dalam konstruktornya untuk berbagai kejadian sentuh.
Dalam beberapa situasi, mungkin ada beberapa pendeteksi gestur di lokasi tertentu di layar, lalu kerangka kerja memperjelas gestur mana yang harus dipanggil. Widget Gesture Detector memutuskan gestur mana yang akan dikenali berdasarkan callback mana yang non-null.
Widget Gesture Detector dalam flutter digunakan untuk mendeteksi interaksi fisik dengan aplikasi di UI. Jika widget seharusnya mengalami isyarat, isyarat itu disimpan di dalam widget Gesture Detector. Widget yang sama menangkap isyarat dan mengembalikan tindakan atau respons yang sesuai.
Contoh Detector Flutter Gestures
Sekarang, mari kita modifikasi aplikasi hello world untuk menyertakan fitur deteksi gerakan dan mencoba memahami konsepnya.
body: Center(
child: GestureDetector(
onTap: () {
_showDialog(context);
},
child: Text( 'Belajar menggunakan gesture', )
)
),
Perhatikan bahwa di sini kita telah menempatkan widget Gesture Detector di atas widget Teks dalam hierarki widget, menangkap event onTap, dan akhirnya menampilkan jendela dialog.
Terapkan fungsi *_showDialog* untuk menampilkan dialog saat pengguna mem-tab pesan halo dunia . Ini menggunakan widget showDialog dan AlertDialog generik untuk membuat dialog widget baru. Kode ditunjukkan di bawah ini –
void _showDialog(BuildContext context) {
showDialog(
context: context, builder: (BuildContext context) {
return AlertDialog(
title: new Text("Pesan"),
content: new Text("Hello world"),
actions: <Widget>[
new FlatButton(
child: new Text("Tutup"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
Contoh lengkap Belajar Flutter Gestures (main.dart)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Gesture',
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;
void _showDialog(BuildContext context) {
showDialog(
context: context, builder: (BuildContext context) {
return AlertDialog(
title: new Text("Pesan"),
content: new Text("Hello world"),
actions: <Widget>[
new FlatButton(
child: new Text("Tutup"),
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', )
)
),
);
}
}
Bagian Akhir
Terakhir, Flutter juga menyediakan sekumpulan kecil widget untuk melakukan Flutter gestures spesifik dan lanjutan. Widget tercantum di bawah ini −
- Dismissible – Mendukung gerakan jentikan untuk menutup widget.
- Draggable – Mendukung gerakan drag untuk memindahkan widget.
- LongPressDraggable − Mendukung gerakan drag untuk memindahkan widget, saat widget induknya juga dapat di
- DragTarget – Menerima widget yang dapat didrag
- IgnorePointer − Menyembunyikan widget dan turunannya dari proses deteksi gerakan.
- AbsorbPointer – Menghentikan proses deteksi gerakan itu sendiri sehingga setiap widget yang tumpang tindih juga tidak dapat berpartisipasi dalam proses deteksi gerakan dan karenanya, tidak ada acara yang dimunculkan.
- Scrollable – Mendukung pengguliran konten yang tersedia di dalam widget.
Temukan lebih banyak artikel seri belajar Dart maupun bahasa pemrograman lainnya hanya di CODEKEY. Klik https://codekey.id/ sekarang juga untuk langsung belajar gratis. Sampai bertemu lagi!
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
