draggable feedback location

[wph144]

hi, thanks for great package
I am using ReorderableWrap of 'reorderables' package.
I found feedback's location is wrong when using responsive_framework package.
More generally, there are same problem when using Draggable widget.
following is minimal reproducible application.

import 'package:flutter/material.dart';
import 'package:responsive_framework/responsive_framework.dart';

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

class MyApp extends StatelessWidget {
// This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) {
        return ResponsiveWrapper.builder(
          BouncingScrollWrapper.builder(context, widget),
          maxWidth: 1200,
          minWidth: 350,
          debugLog: false,
          defaultScale: true,
          breakpoints: [
            ResponsiveBreakpoint.resize(350, name: MOBILE, scaleFactor: 0.8),
            ResponsiveBreakpoint.autoScale(800, name: TABLET, scaleFactor: 1.4),
            ResponsiveBreakpoint.autoScale(1000, name: TABLET, scaleFactor: 1.4),
            const ResponsiveBreakpoint.resize(1200, name: DESKTOP),
            const ResponsiveBreakpoint.autoScale(2460, name: "4K"),
          ],
          mediaQueryData: MediaQuery.of(context).copyWith(textScaleFactor: 1),
          background: Container(),
        );
      },
      home: DraggableExample(),
    );
  }
}

class DraggableExample extends StatefulWidget {
  @override
  DraggableExampleState createState() => DraggableExampleState();
}

class DraggableExampleState extends State<DraggableExample> with SingleTickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Spacer(),
          Row(
            children: [
              Spacer(),
              Draggable(
                feedback: Container(
                  width: 60,
                  height: 60,
                  color: Colors.red,
                ),
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.red,
                ),
              ),
            ],
          ),
          SizedBox(height: MediaQuery.of(context).padding.bottom,),
        ],
      )
    );
  }
}

If item is on top-left, there are no or small difference, on right-bottom there are big difference.
I intentionally put scale factor apart from 1.0

Can you help me?

[rayliverified]

Thanks for reporting this issue.
I'm going to look into if it is possible to overwrite the root level MediaQuery parameters.
Some framework widgets fetch their layout from the root screen metrics directly which means they are not getting the right metrics.

[gcostaapps]

Could you try using this build with the MediaQuery parameter? It was used to fix MediaQuery for entire app.

builder: (BuildContext context, Widget widget) =>
                DevicePreview.appBuilder(
              context,
              Builder(builder: (BuildContext context) {
                return MediaQuery(
                data: MediaQuery.of(context),
                child: ResponsiveWrapper.builder(MainView()),
                  maxWidth: 2460,
                  minWidth: 480,
                  defaultScale: true,
                  breakpoints: <ResponsiveBreakpoint>[
                    const ResponsiveBreakpoint.resize(480, name: MOBILE),
                    const ResponsiveBreakpoint.autoScale(600, name: TABLET),
                    const ResponsiveBreakpoint.autoScale(1000,
                        name: TABLET, scaleFactor: 1.2),
                    const ResponsiveBreakpoint.resize(1200, name: DESKTOP),
                    const ResponsiveBreakpoint.autoScale(2460, name: '4K'),
                  ],
                  background: Container(color: const Color(0xFFF5F5F5)),
                ),

[wph144]

I tried below, but I still have same problem.
It seems that I already used MediaData on MaterialApp level with 'mediaQueryData parameter of ResponsiveWrapper.builder method'.
DevicePreview is just helper and not related to this issue, right?
(i have compile error, so I cannot try right now, aloisdeniel/flutter_device_preview#67)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, widget) {
        return MediaQuery(
          data: MediaQuery.of(context),
          child: ResponsiveWrapper.builder(
            BouncingScrollWrapper.builder(context, widget),
            maxWidth: 1200,
            minWidth: 350,
            debugLog: false,
            defaultScale: true,
            breakpoints: [
              ResponsiveBreakpoint.resize(350, name: MOBILE, scaleFactor: 0.8),
              ResponsiveBreakpoint.autoScale(800, name: TABLET, scaleFactor: 1.4),
              ResponsiveBreakpoint.autoScale(1000, name: TABLET, scaleFactor: 1.4),
              const ResponsiveBreakpoint.resize(1200, name: DESKTOP),
              const ResponsiveBreakpoint.autoScale(2460, name: "4K"),
            ],
//            mediaQueryData: MediaQuery.of(context).copyWith(textScaleFactor: 1),
            background: Container(),
          ),
        );
      },
      home: DraggableExample(),
    );
  }
}

Thanks for reply :)

[bounty1342]

@searchy2 Might be related to this one, but I have issue with ReorderableListView. Should I open a new issue ?
Depending on the location of the click, it throw the widget off.

[rayliverified]

It's most likely related to this issue.

The problem/solution is in passing a transformed composited tap target.

Not sure on the exact implementation but I can point you in the right direction if you are interested in taking a look.

[bounty1342]

Found this :

https://medium.com/flutter/how-to-float-an-overlay-widget-over-a-possibly-transformed-ui-widget-1d15ca7667b6

So wrapping the parent widget with a CompositedTransformTarget to get reference to the cordinate sytem and then wrap the child with CompositedTransformFollower to follow it.
This seems way to easy to actually work 😁

[cyrilOrderoo]

Same problem, very complicated to use draggable on tablet. When moving, the draggable is moved away from the cursor. I have the problem only on iOS, everything works on android. Do you have any news on the issue ? Thanks

[bounty1342]

Hi @searchy2,
Having issues with dragg and drop, but also with other package like flutter_intro.
Do you have any update on a fix ?

[wph144]

any progress?

[wph144]

I resolved with workaround (simple but some boilerplate codes)
If you use the widget that internally use OverlayEntry to make draggable feedback, Responsive framework package can generate coordination problem. e.g., ReorderableWrap, Draggable, LongPressDraggable, etc.
That widget may have parameter onDragStarted, onDragEnded, feedback. (or other name)

Offset dragPosition = Offset.zero;   // member variable or variable in model
Widget feedback;                              // member variable or variable in model

Listener(
  onPointerDown: (details) {
    dragPosition = details.localPosition;
    setState(() {});                                           // or some other notify method
  },
  onPointerMove: (details) {
    dragPosition = details.localPosition;
    setState(() {});
  },
  child: Stack(
    children: [
      LongPressDraggable(
        feedback: const SizedBox(),
        onDragStarted() {
          // your another logic
          feedback = buildYourFeedbackWidget();
          setState(() {});
        },
        onDragEnd(_) {                  // or cancel? anyway when drag ended with any reason
          // your another logic
          feedback = null;
          setState(() {});
        },
        // some other your logics on LongPressDraggable
      ),
      Visibility(
        visible: feedback != null && dragPosition != null,
        child: Positioned(
          left: dragPosition.dx - 40,          // 40 can be changed to your amount
          top: dragPosition.dy - 40,
          child: IgnorePointer(
            child: Opacity(
              opacity: 0.7,
              child: feedback,
            ),
          ),
        ),
      )
    ]
  ),

[infobkm]

no updates for this issue for over a year? I really like this plugin but I can't use it because my app is based on a form with a reorderable list..

[gozluc84]

no updates for this issue for over a year? I really like this plugin but I can't use it because my app is based on a form with a reorderable list..

0.2.0 version released but issue still present.. :( no workaround?

[TimBaumgart]

Any updates on this? I was trying to find a workaround by disabling autoscaling for some widgets where I use ReorderableListView, but could not get it to work. Does anyone know how to do this? Just wrapping my widget with another ResponsiveWrapper did not work.