Draggable widget's feedback is misplaced when using FittedBox

[abigotado]

Steps to reproduce

I have an Android/iOs app with 'Draggable' inside 'FittedBox' (actually it is ResponsiveScaledBox from ResponsiveFramework package, but it is based on FittedBox and with pure FittedBox the problem is reproduced the same way). If I remove FittedBox all is rendered correctly.

I'm facing a problem with Draggable widget #Codelessly/ResponsiveFramework#173 (and here #Codelessly/ResponsiveFramework#17 people describe the same problem with SliverReorderableList). When you drag, the feedback widget appears far away from the child and the distance between the cursor and dragged widget is changing on move (as you can see on the screenshot and attached video).

To reproduce just run my code sample and try to drag any Chip.

An important thing - if we move all the code from MaterialApp's builder parameter to home - the feedback widget will be placed correctly (but will lose FittedBox's scale and become bigger than the child). Unfortunately this is not a solution, as I use MaterialApp.router with GoRouter in production and there's no home parameter.

Expected results

Feedback widget of Draggable is placed correctly, has proper size and doesn't slide from you cursor/finger on move.

Actual results

When you drag, the feedback widget appears far away from the child and the distance between the cursor/finger and dragged widget is changing on move.

Code sample

Code sample

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(
    const App(),
  );
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return LayoutBuilder(builder: (context, constraints) {
          const double width = 500;
          MediaQueryData mediaQueryData = MediaQuery.of(context);

          double aspectRatio = constraints.maxWidth / constraints.maxHeight;
          double scaledWidth = width;
          double scaledHeight = width / aspectRatio;

          bool overrideMediaQueryData = (mediaQueryData.size == Size(constraints.maxWidth, constraints.maxHeight));

          EdgeInsets scaledViewInsets = getScaledViewInsets(
              mediaQueryData: mediaQueryData,
              screenSize: mediaQueryData.size,
              scaledSize: Size(scaledWidth, scaledHeight));
          EdgeInsets scaledViewPadding = getScaledViewPadding(
              mediaQueryData: mediaQueryData,
              screenSize: mediaQueryData.size,
              scaledSize: Size(scaledWidth, scaledHeight));
          EdgeInsets scaledPadding = getScaledPadding(padding: scaledViewPadding, insets: scaledViewInsets);
          return MediaQuery(
            data: mediaQueryData.copyWith(
                size: Size(scaledWidth, scaledHeight),
                viewInsets: scaledViewInsets,
                viewPadding: scaledViewPadding,
                padding: scaledPadding),
            child: FittedBox(
              fit: BoxFit.fitWidth,
              alignment: Alignment.topCenter,
              child: Container(
                width: width,
                height: scaledHeight,
                alignment: Alignment.center,
                child: child,
              ),
            ),
          );
        });
      },
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  _HomeState createState() {
    return _HomeState();
  }
}

class _HomeState extends State<Home> {
  final words = [
    'hello',
    'world',
    'flutter',
    'dart',
    'test',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const Spacer(),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                ...words.map(
                  (final e) {
                    final activeChip = Chip(
                      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      visualDensity: VisualDensity.compact,
                      label: Text(e),
                    );

                    final inactiveChip = Opacity(
                      opacity: 0.3,
                      child: Chip(
                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        visualDensity: VisualDensity.compact,
                        label: Text(e),
                      ),
                    );

                    return Draggable<String>(
                      data: e,
                      feedback: Material(type: MaterialType.transparency, child: activeChip),
                      childWhenDragging: inactiveChip,
                      child: activeChip,
                    );
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

EdgeInsets getScaledViewInsets(
    {required MediaQueryData mediaQueryData, required Size screenSize, required Size scaledSize}) {
  double leftInsetFactor = mediaQueryData.viewInsets.left / screenSize.width;
  double topInsetFactor = mediaQueryData.viewInsets.top / screenSize.height;
  double rightInsetFactor = mediaQueryData.viewInsets.right / screenSize.width;
  double bottomInsetFactor = mediaQueryData.viewInsets.bottom / screenSize.height;

  double scaledLeftInset = leftInsetFactor * scaledSize.width;
  double scaledTopInset = topInsetFactor * scaledSize.height;
  double scaledRightInset = rightInsetFactor * scaledSize.width;
  double scaledBottomInset = bottomInsetFactor * scaledSize.height;

  return EdgeInsets.fromLTRB(scaledLeftInset, scaledTopInset, scaledRightInset, scaledBottomInset);
}

EdgeInsets getScaledViewPadding(
    {required MediaQueryData mediaQueryData, required Size screenSize, required Size scaledSize}) {
  double scaledLeftPadding;
  double scaledTopPadding;
  double scaledRightPadding;
  double scaledBottomPadding;

  double leftPaddingFactor = mediaQueryData.viewPadding.left / screenSize.width;
  double topPaddingFactor = mediaQueryData.viewPadding.top / screenSize.height;
  double rightPaddingFactor = mediaQueryData.viewPadding.right / screenSize.width;
  double bottomPaddingFactor = mediaQueryData.viewPadding.bottom / screenSize.height;

  scaledLeftPadding = leftPaddingFactor * scaledSize.width;
  scaledTopPadding = topPaddingFactor * scaledSize.height;
  scaledRightPadding = rightPaddingFactor * scaledSize.width;
  scaledBottomPadding = bottomPaddingFactor * scaledSize.height;

  return EdgeInsets.fromLTRB(scaledLeftPadding, scaledTopPadding, scaledRightPadding, scaledBottomPadding);
}

EdgeInsets getScaledPadding({required EdgeInsets padding, required EdgeInsets insets}) {
  double scaledLeftPadding;
  double scaledTopPadding;
  double scaledRightPadding;
  double scaledBottomPadding;

  scaledLeftPadding = max(0.0, padding.left - insets.left);
  scaledTopPadding = max(0.0, padding.top - insets.top);
  scaledRightPadding = max(0.0, padding.right - insets.right);
  scaledBottomPadding = max(0.0, padding.bottom - insets.bottom);

  return EdgeInsets.fromLTRB(scaledLeftPadding, scaledTopPadding, scaledRightPadding, scaledBottomPadding);
}

Screenshots or Video

Screenshots / Video demonstration

317915082-1204d45c-b183-4491-8c6c-2d2b835de052.mov

Logs

No response

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.4, on macOS 14.3.1 23D60 darwin-arm64, locale ru-RU)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3.6)
[✓] IntelliJ IDEA Community Edition (version 2022.2)
[✓] VS Code (version 1.87.2)
[✓] Connected device (3 available)
    ! Error: Browsing on the local area network for Ксюша-коза. Ensure the device is unlocked and attached
      with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

• No issues found!

[moffatman]

Probably an issue with taking renderobject transform into account when adding the overlay entry

[huycozy]

Using the sample code, I can reproduce this on master channel as well. Maybe related: #145639

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.5, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 300451adae (25 hours ago), 2024-03-27 21:54:07 -0500
    • Engine revision e76c956498
    • Dart version 3.3.3
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (3 available)
    • Pixel 7 (mobile) • 2B171FDH20084L • android-arm64  • Android 14 (API 34)
    • macOS (desktop)  • macos          • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome         • web-javascript • Google Chrome 123.0.6312.86

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-1.0.pre.37, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-1.0.pre.37 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fd8561a917 (6 hours ago), 2024-03-31 17:12:24 -0400
    • Engine revision 4f6b832c8e
    • Dart version 3.5.0 (build 3.5.0-5.0.dev)
    • DevTools version 2.34.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.87.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.84.0

[✓] Connected device (3 available)
    • iPad (mobile)   • 00008103-000A1464346A201E • ios            • iOS 17.2 21C62
    • macOS (desktop) • macos                     • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome                    • web-javascript • Google Chrome 123.0.6312.87

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

[timcreatedit]

This seems to be the same underlying issue as #145639 and should be fixed by #145647 :)

[timcreatedit]

However, #145647 doesn't change the callback parameters, only the visual feedback.

[timcreatedit]

@goderbauer this can probably be closed now via #145647

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.