1

I need to get position of draggable inside DragTarget.onMove. But in DragTargetDetails.offset we have some weird values. In source code I see that it is set to avatar._lastOffset which is globalPosition - dragStartPoint. But I don't have access to any of those to be able to calculate global position or local position inside DragTarget. Documentation sais that DragTargetDetails.offset is 'The global position when the specific pointer event occurred on the draggable.' but in reality it is a global position minus start drugging point which seems to be useless, how I can use that value?

I prepared a simple example, where you can see offsets from Draggable.onDragUpdate (which is real global position) and from DragTarget.onMove.


import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Offset _dragUpdateOffset = Offset.zero;
  Offset _moveOffset = Offset.zero;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Draggable(
          data: "Test Data",
          child: const Text("Drag me"),
          feedback: const Material(child:Text("Draggable")),
          childWhenDragging: Container(),
          onDragUpdate: (details) {
            setState(() {
              _dragUpdateOffset = details.globalPosition;
            });
          },
        ),
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
            Text("dragUpdate: ${_dragUpdateOffset.dx},${_dragUpdateOffset.dy}"),
            const Text("vs"),
            Text("onMove: ${_moveOffset.dx},${_moveOffset.dy}")
          ],),
          Expanded(
            child: Center(
              child: DragTarget(
                onMove: (details) {
                  _moveOffset = details.offset;
                },
                onWillAccept: (data) => true,
                builder: (context, candidateData, rejectedData) => SizedBox(
                  width: 100,
                  height: 100,
                  child: Container(
                    child: const Text("DragTarget"),
                    decoration: const BoxDecoration(color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Eldar Prylutskyi
  • 31
  • 3

1 Answers1

0

Try wrapping Draggable with Listener and use "onPointerMove: (details)".

speeder
  • 74
  • 3
  • There is no problem with `Draggable`, it has `onDragUpdate` which does the job. But in my real project `Draggable` and `DragTarget` are on different branches of Widget tree, so I need a way to do that with `DragTarget` and `onMove` should do exactly what I want, but it returns weird coordinates in `details`. – Eldar Prylutskyi Sep 20 '21 at 07:08
  • Sure I can wrap `DragTarget` with `Listener` and I can imagine others workarounds, but my question is not about workarounds, my question is about `DragTarget.onMove` and how to properly use it. Or maybe it is just implemented wrongly?? – Eldar Prylutskyi Sep 20 '21 at 07:10
  • I have had issues with Draggble coordinates, so i don't trust it, and use workarounds :) – speeder Sep 20 '21 at 09:36