Blog

Flutter Gesturedetector Tutorial

Uncategorized

Flutter Gesturedetector Tutorial

Below is an example Flutter code snippet that demonstrates the use of various gesture-related callbacks in a GestureDetector. These callbacks include onTap, onTapUp, onTapDown, onLongPress, onDoubleTap, onHorizontalDragStart, onVerticalDragDown, onPanDown, and onScaleStart.

import 'package: flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyGestureDemo(),
    );
  }
}

class MyGestureDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gesture Detector Example'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            print('onTap');
          },
          onTapUp: (TapUpDetails details) {
            print('onTapUp: ${details.globalPosition}');
          },
          onTapDown: (TapDownDetails details) {
            print('onTapDown: ${details.globalPosition}');
          },
          onLongPress: () {
            print('onLongPress');
          },
          onDoubleTap: () {
            print('onDoubleTap');
          },
          onHorizontalDragStart: (DragStartDetails details) {
            print('onHorizontalDragStart: ${details.globalPosition}');
          },
          onVerticalDragDown: (DragDownDetails details) {
            print('onVerticalDragDown: ${details.globalPosition}');
          },
          onPanDown: (DragDownDetails details) {
            print('onPanDown: ${details.globalPosition}');
          },
          onScaleStart: (ScaleStartDetails details) {
            print('onScaleStart: ${details.focalPoint}');
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Tap or Drag Here',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Leave your thought here