Tutorial Flutter Memakai Gesture Detector Dan Penjelasannya

Tutorial flutter gesture detector

- Gesture detector merupakan widget yang dipakai untuk mendeteksi gesture, misalnya ialah ketika pengguna menekan, mengetuk, melaksanakan drag suatu widget. Gesture detector sangat berkhasiat ketika kau ingin menciptakan suatu widget yang tidak memili listener, misalnya kau ingin menambahkan listener klik pada widget ibarat gambar, text, atau icon.

Pada tutorial ini kita akan berguru memakai gesture detector dengan banyak sekali macam listener, pastikan kau mengikuti tutorialnya hingga selesai ya.

Latihan

Berikut ilustrasi dari latihan yang akan kita buat ibarat berikut :

Pengguna memperlihatkan gesture yang berbeda-beda pada widget yang memakai gesture detector, lalu kesannya sanggup ditampilkan pada title AppBar.

flutter gesture detector tutorial

Buka file main.dart pada folder lib, dan ubah kodenya menjadi ibarat berikut :

import 'package:flutter/material.dart';  void main() {   runApp(MaterialApp(     title: "Gesture Detector",     debugShowCheckedModeBanner: false,     home: MyApp(),   )); }  class MyApp extends StatefulWidget {   @override   _MyAppState createState() => _MyAppState(); }  class _MyAppState extends State<MyApp> {    String _title;    @override   void initState() {     super.initState();     _title = "Gesture Detector";   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         centerTitle: true,         title: Text(_title),       ),       body: ListView(         children: <Widget>[          ],       ),     ); } 

Kita sudah menciptakan aba-aba dasarnya, lalu buat fungsi didalam class _MyAppState untuk mengubah state title, kodenya ibarat berikut :

void _changeTitle(String title) {   setState(() {     _title = title;   }); } 

Selanjutnya, kita akan menciptakan fungsi untuk menampilkan Text didalam Container yang nantinya akan kita tambahkan GestureDetector. Buat fungsi berikut didalam class _MyAppState :

Widget _buildItem(String title) { return Container(     margin: EdgeInsets.all(8.0),     padding: EdgeInsets.all(8.0),     color: Colors.blue,     child: Center(       child: Text(         title,         style: TextStyle(           color: Colors.white,           fontWeight: FontWeight.bold,         ),       ),     ),   ); } 

Sekarang saatnya menambahkan GestureDetector didalam children dari widget ListView, sehingga kodenya menjadi ibarat berikut :

body: ListView(   children: <Widget>[     GestureDetector(       onTap: () {         _changeTitle("onTap Clicked");       },       child: _buildItem("Click with tap"),     ),     GestureDetector(       onDoubleTap: () {         _changeTitle("onDoubleTap Clicked");       },       child: _buildItem("Click with double tap"),     ),     GestureDetector(       onLongPress: () {         _changeTitle("onLongPress Clicked");       },       child: _buildItem("Click with long press"),     ),     GestureDetector(       onVerticalDragDown: (dragDetails) {         _changeTitle("Vertical Drag Clicked");       },       child: _buildItem("Click with vertical drag"),     ),     GestureDetector(       onHorizontalDragEnd: (dragDetails) {         _changeTitle("Horizontal Drag Clicked");       },       child: _buildItem("Click with horizontal drag"),     ),     GestureDetector(       onScaleEnd: (scaleDetails) {         _changeTitle("Scale Clicked");       },       child: _buildItem("Click with scale left"),     ),   ], ), 

Sekarang coba run, maka kita sudah menciptakan widget dengan listener yang berbeda-beda ibarat tap, double tap, long press. Hasilnya ibarat berikut :

flutter gesture detector widget

Kode lengkap

Untuk aba-aba lengkap file main.dart seperti berikut :

import 'package:flutter/material.dart';  void main() {   runApp(MaterialApp(     title: "Gesture Detector",     debugShowCheckedModeBanner: false,     home: MyApp(),   )); }  class MyApp extends StatefulWidget {   @override   _MyAppState createState() => _MyAppState(); }  class _MyAppState extends State<MyApp> {    String _title;    @override   void initState() {     super.initState();     _title = "Gesture Detector";   }    void _changeTitle(String title) {     setState(() {       _title = title;     });   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         centerTitle: true,         title: Text(_title),       ),       body: ListView(         children: <Widget>[           GestureDetector(             onTap: () {               _changeTitle("onTap Clicked");             },             child: _buildItem("Click with tap"),           ),           GestureDetector(             onDoubleTap: () {               _changeTitle("onDoubleTap Clicked");             },             child: _buildItem("Click with double tap"),           ),           GestureDetector(             onLongPress: () {               _changeTitle("onLongPress Clicked");             },             child: _buildItem("Click with long press"),           ),           GestureDetector(             onVerticalDragDown: (dragDetails) {               _changeTitle("Vertical Drag Clicked");             },             child: _buildItem("Click with vertical drag"),           ),           GestureDetector(             onHorizontalDragEnd: (dragDetails) {               _changeTitle("Horizontal Drag Clicked");             },             child: _buildItem("Click with horizontal drag"),           ),           GestureDetector(             onScaleEnd: (scaleDetails) {               _changeTitle("Scale Clicked");             },             child: _buildItem("Click with scale left"),           ),         ],       ),     );   }    Widget _buildItem(String title) {     return Container(       margin: EdgeInsets.all(8.0),       padding: EdgeInsets.all(8.0),       color: Colors.blue,       child: Center(         child: Text(           title,           style: TextStyle(             color: Colors.white,             fontWeight: FontWeight.bold,           ),         ),       ),     );   } } 

Bedah Kode

Untuk memahami lebih dalam lagi, mari kita bedah dan pelajari kodenya.

Sebelumnya kita menciptakan variable _title yang dipakai untuk menampung data yang sanggup berubah nantinya sesuai listener yang diberikan.

Sebelum widget ditampilkan, yaitu pada dikala initState() kita mengubah variable _title menjadi "Gesture Detector", sehingga pada dikala aplikasi pertama kali dijalankan yang muncul ialah "Gesture Detector".

@override void initState() {   super.initState();   _title = "Gesture Detector"; } 

Untuk memudahkan kita juga menciptakan fungsi untuk mengubah state variable _title yang sudah kita buat sebelumnya. Fungsi ini akan dipanggil didalam listener widget Gesture Detector.

void _changeTitle(String title) {   setState(() {     _title = title;   }); } 

Kemudian kita menciptakan fungsi _buildItem() untuk menampilkan text yang nantinya dipanggil didalam child widget Gesture Detector.

Gesture Detector mempunyai banyak sekali macam listener yang sanggup kita gunakan. Berikut klarifikasi listener yang sering dipakai :

• onTap : listener ketika user mengetuk widget.
• onDoubleTap : listener ketika user mengetuk 2x.
• onLongPress : listener ketika user menekan dan tahan beberapa detik.
• onVerticalDrag : listener ketika user melaksanakan drag secara vertical.
• onHorizontalDrag : listener ketika user melaksanakan drag secara horizontal.
• onScale : listener ketika user drag dan memperluas kursor.

Github

Untuk kodenya juga sanggup kau pelajari pada repository github :

Github Saya

Kesimpulan

Gesture Detector sanggup kau gunakan ketika kau ingin menambahkan listener ibarat tap, press, drag, scale pada widget yang bahwasanya tidak mempunyai listener ibarat Text, Icon, Image, dan masih banyak lagi. Kamu sanggup mempelajari dan mencoba listener lainnya untuk memperdalam skill kau dalam berguru Gesture Detector.

Jika kau ada pertanyaan atau masukan, silahkan berdiskusi lewat kolom komentar. Untuk memperdalam skill kamu, silahkan pelajari juga tutorial berikut :
Tutorial flutter memakai cached network image
Tutorial flutter menciptakan radio button

Semoga bermanfaat ya.

Share this post