Currently, I am building a Pinterest clone app and I really need your help. Actually, I've spent almost an hour searching for the answer but none of the solutions given worked. So what I need is just to determine the x and y axes of the place where the user pressed through the Gesture detector. Can anyone help me, please...

CodePudding user response：

Your question is unclear. What do you mean by determine the x and y axes of the Gesture detector

If all you need is know if user swipped right, left or down here is an example

  GestureDetector(
          onVerticalDragUpdate: (details) {
    int sensitivity = 8;
            if (details.delta.dy > sensitivity) {
              // Down Swipe
              
            } else if (details.delta.dy < -sensitivity) {
              // Up Swipe
             
            }
          },
          onHorizontalDragUpdate: (details) {
            // Note: Sensitivity is integer used when you don't want to mess up vertical drag
            int sensitivity = 8;
            if (details.delta.dx > sensitivity) {
              // Right Swipe
             
            } else if (details.delta.dx < -sensitivity) {
             
              //Left Swipe
            }
          },

CodePudding user response：

You can use rect_getter for your desire. And implement as follows:

    var globalKey = RectGetter.createGlobalKey();
  Offset _tapPosition;
  var dx;   //for x-axis
  var dy;   //for y-axis

RectGetter(
              key: globalKey,
              child: new Expanded(
                child: new InkWell(
                  onTap:  _handleTapDown,
                  onTapDown: _handleTapDown,
                  child: Center(
                    child: Container(
                      child: Utility.imageFromBase64String(imagename),
                      //  backgroundColor: const Color(0xFF20283e),
                    ),
                  ),
                ),
              ),
            ),

_handleTapDown function

void _handleTapDown(TapDownDetails details) {
final RenderBox referenceBox = context.findRenderObject();
setState(() {
  _tapPosition = referenceBox.globalToLocal(details.globalPosition);
  dx = double.parse(_tapPosition.dx.toStringAsFixed(2));
  dy = double.parse(_tapPosition.dy.toStringAsFixed(2));
  print(_tapPosition);
 
});
}

CodePudding user response：

I believe you should not be using a GestureDetector here but a Listener widget instead. As a listener can give you the global position of where the user presser, or a relative position to where the widget pressed starts.

Here is some example code:

import 'package:flutter/material.dart';

class GetPositionExample extends StatelessWidget {
  const GetPositionExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Listener(

      // This will report a PointerDownEvent whenever the user presses the screen.
      // If you want updates as the user moves their finger across the screen,
      // use onPointerMove instead.
      onPointerDown: (PointerDownEvent event) {
        // Global screen position.
        print("Global position x:${event.position.dx}, y:${event.position.dy}");
        // Position relative to where this widget starts.
        print("Relative position: x:${event.localPosition.dx}, y:${event.localPosition.dy}");
      },

      // You should also be aware of these Listener methods,
      // if any of them is more suited for your use-case:

      // onPointerMove: (PointerMoveEvent event) {},
      // onPointerUp: (PointerUpEvent event) {},
      // onPointerCancel: (PointerCancelEvent event) {},
      // onPointerHover: (PointerHoverEvent event) {},
      // onPointerSignal: (PointerSignalEvent event) {},

      child: Container(
        color: Colors.blue,
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height/2,
      ),
    );
  }
}

// Some code to run the above example
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: const [
        GetPositionExample(),
      ],
    )));
  }
}

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