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 :

Tap

onTapDown
onTapUp
onTap
onTapCancel

Double tap

onDoubleTap

Long press

onLongPress

Vertical drag

onVerticalDragStart
onVerticalDragUpdate
onVerticalDragEnd

Horizontal drag

onHorizontalDragStart
onHorizontalDragUpdate
onHorizontalDragEnd

Pan

onPanStart
onPanUpdate
onPanEnd

Example:

Dart

import 'package:flutter/material.dart';


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


class MyApp extends StatelessWidget {

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


  @override

  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);


  @override

  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);


  @override

  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

        Scaffold.of(context).showSnackBar(snackBar);

      },

      // 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

Apps Lanka.