Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 40 : Belajar Flutter Gestures dan Contohnya!

Tutorial Dart 40 : Belajar Flutter Gestures dan Contohnya!

-

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.

Flutter Gestures

flutter gestures, belajar flutter

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.
Artikel Terkait  Tutorial Dart 4 : Mengenal Tipe data pada Dart

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:

  1. Tap: Artinya menyentuh permukaan layar dari ujung jari sebentar lalu melepaskannya. Gerakan ini berisi acara berikut:
  • onTapDown
  • onTapUp
  • onTap
  • onTapCancel
  1. Double Tap: Ini mirip dengan gerakan Tap, tetapi Anda perlu mengetuk dua kali dalam waktu singkat. Gerakan ini berisi acara berikut:
  • onDoubleTap
  1. 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.
  1. Long Press: Artinya menyentuh permukaan layar di lokasi tertentu untuk waktu yang lama. Gerakan ini berisi acara berikut:
  • onLongPress
  1. 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
  1. 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.
Artikel Terkait  Tutorial Dart 12 : Runes Dart, Mengenal Tipe Data Runes dalam Bahasa Dart

Detektor Flutter Gestures

flutter gestures, belajar flutter

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.

Artikel Terkait  Tutorial Dart 43 : Macam-Macam Flutter State Management Library

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.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial PHP 2 : Cara Install PHP, Langkah Awal Belajar PHP

PHP adalah bahasa pemrograman gratis dan open source. Secara teknis tidak perlu menginstal PHP: sebagian besar host web dan...

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial HTML/CSS 23 : Cara Membuat Form Sederhana dengan HTML

Form memiliki peran yang sangat krusial bagi website atau aplikasi untuk menjaga sistem keamanannya. Form HTML digunakan untuk mengumpulkan...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 20 : Mari Pelajari Cara Menggunakan Fungsi GROUP by SQL

Pada pembahasan seri Tutorial SQL ke- 20 ini, Codekey akan membahas tentang GROUP BY yang merupakan statement di dalam...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya