Flutter : Drag Widgets across screen (Not Drag and Drop)

2.5k Views Asked by At

I want to just drag widgets across screen, not drag and drop.

But, whenever I leave it and start dragging again, it starts getting drag from the position it started with. As if it was reset.

My guess is build is called again and again, so it automatically uses the original position values. How do I fix this? What should the code be?

So in other words, position is set to (100, 100) after the DragEvent ends. And then next drag start from (100, 100) instead of the last position widget was dropped to.

I also tried this with GlobalPosition, but getting same results. Here is my code :

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  double x1 = 100.0;
  double x2 = 200.0;
  double y1 = 100.0;
  double y2 = 200.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Drag widget on screen'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: x1,
            top: y1,
            child: GestureDetector(
              onHorizontalDragUpdate: (details) {
                setState(() {
                  x1 = details.localPosition.dx;
                  y1 = details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.amber,
              ),
            ),
          ),
          Positioned(
            left: x2,
            top: y2,
            child: GestureDetector(
              onHorizontalDragUpdate: (details) {
                setState(() {
                  x2 = details.localPosition.dx;
                  y2 = details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Drag Widgets across screen

1

There are 1 best solutions below

0
On
  double x1 = 100.0, x2 = 200.0, y1 = 100.0,
  y2 = 200.0, x1Prev = 100.0, x2Prev = 200.0, y1Prev = 100.0,
  y2Prev = 100.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('Drag widget on screen'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: x1,
            top: y1,
            child: GestureDetector(
              onPanDown:(d){
                x1Prev = x1;
                y1Prev = y1;
              },
              onPanUpdate: (details) {
                setState(() {
                  x1 = x1Prev + details.localPosition.dx;
                  y1 = y1Prev + details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.amber,
              ),
            ),
          ),
          Positioned(
            left: x2,
            top: y2,
            child: GestureDetector(
               onPanDown:(d){
                x2Prev = x2;
                y2Prev = y2;
              },
              onPanUpdate: (details) {
                setState(() {
                  x2 = x2Prev + details.localPosition.dx;
                  y2 = y2Prev + details.localPosition.dy;
                });
              },
              child: Container(
                width: 64,
                height: 64,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }