Detained Developer
Detained Developer

Reputation: 1304

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

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

Upvotes: 4

Views: 2931

Answers (1)

Naveen Avidi
Naveen Avidi

Reputation: 3073

  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,
              ),
            ),
          ),
        ],
      ),
    );
  }

Upvotes: 7

Related Questions