Gesture Detector Widget

Introduction of Gesture Detector Widget

In Flutter, the Gesture Detector widget is used to recognize various user gestures and events on the screen. It can wrap around other widgets and provide callbacks for different types of gestures, such as taps, drags, and long presses.

Below is a brief explanation of the Gesture Detector widget with key properties:

child: The widget that the GestureDetector will wrap around and respond to gestures on.

GestureDetector(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
  onTap: () {
    // Handle tap gesture
  },
),

onTap: A callback that is triggered when the user taps the widget.

GestureDetector(
  onTap: () {
    // Handle tap gesture
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

onDoubleTap: A callback that is triggered when the user double-taps the widget.

GestureDetector(
  onDoubleTap: () {
    // Handle double tap gesture
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

onLongPress: A callback that is triggered when the user long presses the widget.

GestureDetector(
  onLongPress: () {
    // Handle long press gesture
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

onPanUpdate: A callback that is triggered when the user pans (drags) over the widget. It provides details about the pan gesture, such as the position and delta.

GestureDetector(
  onPanUpdate: (details) {
    // Handle pan gesture
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

behavior: Defines the hit testing behavior of the Gesture Detector Widget. Options include ‘HitTestBehavior.deferToChild’, ‘HitTestBehavior.opaque’, and ‘HitTestBehavior.translucent’.

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () {
    // Handle tap gesture
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

Final Code: This is the final code with the combination of some above Gesture Detector Widget properties.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int numberOfTimesTapped = 0;

  void _increaseNum() {
    setState(() {
      numberOfTimesTapped++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _increaseNum,
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(
                'Tapped ${numberOfTimesTapped} times',
                style: const TextStyle(fontSize: 30),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

These are just a few properties of the Gesture Detector widget. It’s a versatile widget that allows developers to create interactive user interfaces by responding to various gestures and events. The choice of callbacks and behavior properties provides flexibility in handling user input.

Thank for visiting Hybrid App Development
Posted by Hussam HM