Tutorial Flutter Menggunakan Gesture Detector dan Penjelasannya

Tutorial flutter gesture detector
Tutorial flutter gesture detector
Codingtive.com - Gesture detector merupakan widget yang digunakan untuk mendeteksi gesture, contohnya adalah ketika pengguna menekan, mengetuk, melakukan drag suatu widget. Gesture detector sangat berguna ketika kamu ingin membuat suatu widget yang tidak memili listener, contohnya kamu ingin menambahkan listener klik pada widget seperti gambar, text, atau icon.

Pada tutorial ini kita akan belajar menggunakan gesture detector dengan berbagai macam listener, pastikan kamu mengikuti tutorialnya sampai selesai ya.

Latihan

Berikut ilustrasi dari latihan yang akan kita buat seperti berikut :
Pengguna memberikan gesture yang berbeda-beda pada widget yang menggunakan gesture detector, kemudian hasilnya dapat ditampilkan pada title AppBar.
flutter gesture detector tutorial
flutter gesture detector tutorial
Buka file main.dart pada folder lib, dan ubah kodenya menjadi 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";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(_title),
      ),
      body: ListView(
        children: <Widget>[

        ],
      ),
    );
}
Kita sudah membuat kode dasarnya, kemudian buat fungsi didalam class _MyAppState untuk mengubah state title, kodenya seperti berikut :
void _changeTitle(String title) {
  setState(() {
    _title = title;
  });
}
Selanjutnya, kita akan membuat 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 seperti 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 membuat widget dengan listener yang berbeda-beda seperti tap, double tap, long press. Hasilnya seperti berikut :
flutter gesture detector widget
flutter gesture detector widget

Kode lengkap

Untuk kode 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 membuat variable _title yang digunakan untuk menampung data yang dapat berubah nantinya sesuai listener yang diberikan.

Sebelum widget ditampilkan, yaitu pada saat initState() kita mengubah variable _title menjadi "Gesture Detector", sehingga pada saat aplikasi pertama kali dijalankan yang muncul adalah "Gesture Detector".
@override
void initState() {
  super.initState();
  _title = "Gesture Detector";
}
Untuk memudahkan kita juga membuat 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 membuat fungsi _buildItem() untuk menampilkan text yang nantinya dipanggil didalam child widget Gesture Detector.

Gesture Detector memiliki berbagai macam listener yang dapat kita gunakan. Berikut penjelasan listener yang sering digunakan :

  • 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 melakukan drag secara vertical.
  • onHorizontalDrag : listener ketika user melakukan drag secara horizontal.
  • onScale : listener ketika user drag dan memperluas kursor.

Github

Untuk kodenya juga dapat kamu pelajari pada repository github :

Kesimpulan

Gesture Detector dapat kamu gunakan ketika kamu ingin menambahkan listener seperti tap, press, drag, scale pada widget yang sebenarnya tidak memiliki listener seperti Text, Icon, Image, dan masih banyak lagi. Kamu dapat mempelajari dan mencoba listener lainnya untuk memperdalam skill kamu dalam belajar Gesture Detector.

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

Semoga bermanfaat ya.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Menggunakan Gesture Detector dan Penjelasannya"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel