Flutter Gesture Detector Widget In Sinhala

Flutter Gesture Detector Widget In Sinhala

Gestures යෙදුමක් සමඟ අන්තර්ක්‍රියා කිරීමට අභිනයන් භාවිතා කරයි. යෙදුම සමඟ භෞතිකව අන්තර්ක්‍රියා කිරීමට එය සාමාන්‍යයෙන් ස්පර්ශ පදනම් වූ උපාංගවල භාවිතා වේ. යෙදුමක් පහළට අනුචලනය කිරීම සඳහා නිශ්චිත දිශාවකට ස්වයිප් කිරීම වැනි වඩාත් සංකීර්ණ භෞතික අන්තර්ක්‍රියා සඳහා තිරය මත තනි තට්ටු කිරීමක් තරම් සරල විය හැකිය. එය සූදු ක්‍රීඩාවේ දැඩි ලෙස භාවිතා වන අතර උපාංග වෙන කවරදාටත් වඩා ස්පර්ශ මත පදනම් වන බැවින් සෑම යෙදුමකටම ක්‍රියා කිරීමට අවශ්‍ය වේ. මෙම ලිපියෙන් අපි ඒවා විස්තරාත්මකව සාකච්ඡා කරමු.

Some widely used gestures are mentioned here :

  • Tap: Touching the surface of the device with the fingertip for a small duration of time period and finally releasing the fingertip.

  • Double Tap: Tapping twice in a short time.

  • Drag: Touching the surface of the device with the fingertip and then moving the fingertip in a steadily and finally releasing the fingertip.

  • Flick: Similar to dragging, but doing it in a speedier way.

  • Pinch: Pinching the surface of the device using two fingers.

  • Zoom: Opposite of pinching.

  • Panning: Touching the device surface with the fingertip and moving it in the desired direction without releasing the fingertip.

The GestureDetector widget in flutter is used to detect physical interaction with the application on the UI. If a widget is supposed to experience a gesture, it is kept inside the GestureDetector widget. The same widget catches the gesture and returns the appropriate action or response.

Below is the list of gestures and their corresponding events :


  • onTapDown

  • onTapUp

  • onTap

  • onTapCancel

Double tap

  • onDoubleTap

Long press

  • onLongPress

Vertical drag

  • onVerticalDragStart

  • onVerticalDragUpdate

  • onVerticalDragEnd

Horizontal drag

  • onHorizontalDragStart

  • onHorizontalDragUpdate

  • onHorizontalDragEnd


  • onPanStart

  • onPanUpdate

  • onPanEnd


  • Dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);


  Widget build(BuildContext context) {

    const title = 'Apps Lanka Dev';

    return const MaterialApp(

      title: title,

      home: MyHomePage(title: title),




class MyHomePage extends StatelessWidget {

  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);


  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: const Text('Apps Lanka Dev'),

        backgroundColor: Colors.green,


      body: const Center(child: MyButton()),




class MyButton extends StatelessWidget {

  const MyButton({Key? key}) : super(key: key);


  Widget build(BuildContext context) {

    // The GestureDetector wraps the button.

    return GestureDetector(

      // show snackbar on tap of child

      onTap: () {

        const snackBar =

            SnackBar(content: Text(" Welcome To Apps Lanka Dev :)"));

        // ignore: deprecated_member_use



      // The tap button

      child: Container(

        padding: const EdgeInsets.all(12.0),

        decoration: BoxDecoration(

          // ignore: deprecated_member_use

          color: Theme.of(context).buttonColor,

          borderRadius: BorderRadius.circular(8.0),


        child: const Text('Tap Button'),







 We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk


Leave a comment

Your email address will not be published. Required fields are marked *