Flutter LongPressDraggable feedback positioned at top left of a container instead of finger press po-CodePudding

I am new to flutter and a I am trying to create a container that when the user long presses it - a draggable circle shows that the user can move within the boundaries of the container.

I tried many solution, but came to the conclusion that probably the best way to achieve this is to use the LongPressDraggable widget on the container, and set the feedback to the circle that the user can drag. The problem is that when I long press the container the circle appears at the top left corner of the container instead of the position of the press. I also tried adding feedbackOfsset but it did not work (did not move the feedback position at all, I don't know why). Also according to the documentation example, this should work as intended and show the feedback on the correct position.

My code:

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Color.fromRGBO(239, 223, 224, 1.0),
        body: Center(
          child: Container(
            width: 230,
            height: 200,
            color: Colors.purple,
            child: LongPressDraggable<String>(
              feedback: Container(
                width: 80,
                height: 80,
                decoration: BoxDecoration(
                    color: const Color.fromRGBO(0, 0, 0, 0.6),
                    shape: BoxShape.circle,
                    border: Border.all(
                        width: 2,
                        color: const Color.fromRGBO(255, 255, 255, 0.8)
                    )
                ),
              ),
              child: Container(
                decoration: const BoxDecoration(
                    color: Colors.blue,
                    shape: BoxShape.circle,
                ),
              ),
            ),
          ),
        )
      )
    );
  }

To be clear - the wrapper container is necessary because I am adding Stack in the child container (just deleted it for this example)

The result: (I painted the wrapper container in purple for the sake of this example)

CodePudding user response：

Well, to get in the center or where your finger is, we call the property :

dragAnchorStrategy : A strategy that is used by this draggable to get the anchor offset when it is dragged.

Then we only return the Offset both with value of 40 because it is the half of 80 (Container size), if you like try to put 0,0 or 80,80 to see the difference.

 body: Scaffold(
    backgroundColor: const Color.fromRGBO(239, 223, 224, 1.0),
    body: Center(
      child: Container(
        width: 230,
        height: 200,
        color: Colors.purple,
        child: LongPressDraggable<int>(
          dragAnchorStrategy:
              (Draggable<Object> _, BuildContext __, Offset ___) =>
                  const Offset(40, 40), // here
          feedback: Container(
            width: 80,
            height: 80,
            decoration: BoxDecoration(
              color: const Color.fromRGBO(0, 0, 0, 0.6),
              shape: BoxShape.circle,
              border: Border.all(
                width: 2,
                color: const Color.fromRGBO(255, 255, 255, 0.8),
              ),
            ),
          ),
          child: Container(
            decoration: const BoxDecoration(
              color: Colors.blue,
              shape: BoxShape.circle,
            ),
          ),
        ),
      ),
    ),
  ),