[Flutter][20] GestureDetector, Mendeteksi Gesture pada Widget

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Monday, 06 May 2019

Hello world,

Pembahasan kali ini adalah mengenai GestureDetector. GestureDetector sendiri adalah widget yang digunakan untuk mendeteksi gesture pada widget seperti gesture ontap, doubletab dan lain-lain. Kapan dan dimana widget ini biasanya digunakan? Kita sering membuat thumbnail, gridview, image dan lain-lain yang tidak memiliki action onpressed seperti pada button atau list. Seperti yang kita tahu jika ingin membuat sebuah action onpressed maka kita bisa menggunakan button atau listItem. Nah di sini GestureDetector memiliki fungsi tersebut karena memiliki action yang dapat kita atur seperti ontap, doubletap dan lain-lain.

Cara penggunaannya adalah seperti di bawah ini. Di bawah ini saya beri contoh dimana ada widget yang tidak menggunakan GestureDetector dan yang menggunakan GestureDetector.

Tanpa GestureDetector.

Dari contoh di bawah ini saya buat sebuah contoh listview yang berisi card yang memiliki image dan judul text. Tetapi di sini setiap list (card) pada list belum bisa diklik karena tidak memiliki action.

    body: new Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: <Widget>[
new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image(image: NetworkImage("http://code.byriza.com/lib/blog/flutter222.png"),),
new Container(
padding: EdgeInsets.all(10.0),
child: new Text("Flutter Tutorial 01"),
)
],
),
),
new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image(image: NetworkImage("http://code.byriza.com/lib/blog/flutter222.png"),),
new Container(
padding: EdgeInsets.all(10.0),
child: new Text("Flutter Tutorial 02"),
)
],
),
),
],
)
),

Dengan GestureDetector.

new GestureDetector(
onTap: (){
Route route = MaterialPageRoute(builder: (context) => Myapp());
Navigator.push(context, route);
},
child: new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image(
image: NetworkImage(
"http://code.byriza.com/lib/blog/flutter222.png"),
),
new Container(
padding: EdgeInsets.all(10.0),
child: new Text("Flutter Tutorial 01"),
)
],
),
),
),

Pada contoh di atas saya membungkus card pada list dengan menggunakan GestureDetector dan menambahkan onTab. Di dalam onTab kita dapat menambahkan action tertentu yang kita inginkan seperti membuat navigasi atau menjalankan fungsi tertentu.

Full Code:

import 'package:flutter/material.dart';
import './halamanlain.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamankedua(),
));
}

class Halamankedua extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Kedua"),
),
body: new Container(
padding: EdgeInsets.all(10.0),
child: ListView(
children: <Widget>[
new GestureDetector(
onTap: () {
Route route = MaterialPageRoute(builder: (context) => Halamanlain());
Navigator.push(context, route);
},
child: new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image(
image: NetworkImage(
"http://code.byriza.com/lib/blog/flutter222.png"),
),
new Container(
padding: EdgeInsets.all(10.0),
child: new Text("Flutter Tutorial 01"),
)
],
),
),
),
new GestureDetector(
onTap: () {
Route route = MaterialPageRoute(builder: (context) => Halamanlain());
Navigator.push(context, route);
},
child: new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Image(
image: NetworkImage(
"http://code.byriza.com/lib/blog/flutter222.png"),
),
new Container(
padding: EdgeInsets.all(10.0),
child: new Text("Flutter Tutorial 02"),
)
],
),
),
),
],
),
),
);
}
}

Selamat mencoba :)