flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.18k stars 26.64k forks source link

Draggable doesn't show dragging on Web #147435

Open gambuccigirl opened 2 weeks ago

gambuccigirl commented 2 weeks ago

Steps to reproduce

Run attached dart code as web. (fails to work properly, text changes to dragging but the box doesn't follow the cursor)

Run as linux app. (works)

Expected results

"Dragging" in box shows as you drag around.

Actual results

Can't see the dragging occur.

Code sample

Code sample ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Draggable Widget Example'), ), body: Center( child: Draggable( feedback: Container( width: 100, height: 100, color: Colors.blue.withOpacity(0.5), child: const Center( child: Text( 'Dragging...', style: TextStyle(color: Colors.white, fontSize: 14), ), ), ), childWhenDragging: Container( width: 100, height: 100, color: Colors.blue.withOpacity(0.5), ), onDraggableCanceled: (_, __) { print('Drag Canceled'); }, child: Container( width: 100, height: 100, color: Colors.blue, child: const Center( child: Text( 'Drag Me', style: TextStyle(color: Colors.white), ), ), ), ), ), ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration [Upload media here]

Logs

Logs ```console Launching lib/test.dart on Chrome in debug mode... Waiting for connection from debug service on Chrome... This app is linked to the debug service: ws://127.0.0.1:41405/DoSBhwNAhaM=/ws Debug service listening on ws://127.0.0.1:41405/DoSBhwNAhaM=/ws Debug service listening on ws://127.0.0.1:41405/DoSBhwNAhaM=/ws Drag Canceled ```

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.19.6, on Ubuntu 22.04.4 LTS 6.2.0-39-generic, locale en_US.UTF-8) • Flutter version 3.19.6 on channel stable at /home/egambucci/snap/flutter/common/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 54e66469a9 (9 days ago), 2024-04-17 13:08:03 -0700 • Engine revision c4cd48e186 • Dart version 3.3.4 • DevTools version 2.31.1 [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✓] Chrome - develop for the web • Chrome at google-chrome [✓] Linux toolchain - develop for Linux desktop • clang version 10.0.0-4ubuntu1 • cmake version 3.16.3 • ninja version 1.10.0 • pkg-config version 0.29.1 [!] Android Studio (not installed) • Android Studio not found; download from https://developer.android.com/studio/index.html (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions). [✓] IntelliJ IDEA Community Edition (version 2022.2) • IntelliJ at /home/egambucci/Applications/idea-IC-222.4345.14 • Flutter plugin version 76.3.1 • Dart plugin version 222.4345.14 [✓] Connected device (2 available) • Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.4 LTS 6.2.0-39-generic • Chrome (web) • chrome • web-javascript • Google Chrome 122.0.6261.128 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ```
ReinisSprogis commented 2 weeks ago

https://github.com/flutter/flutter/assets/69913791/40dc43f5-820c-4243-9226-c75f5b2dcf52

I tried in dartpad chrome and edge and seems like working as expected.

danagbemava-nc commented 2 weeks ago

Hi @gambuccigirl, it seems to be working as expected for me. See the recording below. Can you share a recording of what happens? Do you see any errors in your browser console? Is there any additional information you can provide?

https://github.com/flutter/flutter/assets/88313112/f5ba8fc6-e6f3-4b96-be42-3d3630d72d91

gambuccigirl commented 2 weeks ago

https://github.com/flutter/flutter/assets/105525616/20eb1aa7-9855-4d76-a877-06565697a9d0

The video is from running in chrome on linux. It's fine running as a linux app, and also fine running the same code on windows chrome.

And there is a warning in console:

 This app is linked to the debug service: ws://127.0.0.1:41387/FtFa1VIIf1k=/ws
canvaskit.js:129 WebGL: this extension has very low support on mobile devices; do not rely on it for rendering effects: WEBGL_polygon_mode
(anonymous) @ canvaskit.js:129
kd @ canvaskit.js:129
jd @ canvaskit.js:128
fa @ canvaskit.js:127
a.GetWebGLContext @ canvaskit.js:14
CanvasKitExtension$124GetOffscreenWebGLContext @ canvaskit_api.dart:158
[_createNewCanvas] @ surface.dart:420
createOrUpdateSurface @ surface.dart:293
prepareToDraw @ offscreen_canvas_rasterizer.dart:61
draw @ rasterizer.dart:49

Entire warning stack trace: chrome_error.txt

danagbemava-nc commented 2 weeks ago

Hi @gambuccigirl, I just tested on ubuntu 22 with chrome 124 but I can't seem to reproduce the issue. See the recording below. Can you try upgrading chrome to see if this still reproduces for you? Also, what version of chrome was the windows device running?

Screencast from 04-30-2024 06:43:56 AM.webm

flutter doctor -v ``` [!] Flutter (Channel stable, 3.19.6, on Ubuntu 22.04.4 LTS 6.5.0-28-generic, locale en_US.UTF-8) • Flutter version 3.19.6 on channel stable at /home/daniel/fvm/versions/stable ! Warning: `flutter` on your path resolves to /home/daniel/fvm/versions/beta/bin/flutter, which is not inside your current Flutter SDK checkout at /home/daniel/fvm/versions/stable. Consider adding /home/daniel/fvm/versions/stable/bin to the front of your path. ! Warning: `dart` on your path resolves to /home/linuxbrew/.linuxbrew/Cellar/dart/3.2.2/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /home/daniel/fvm/versions/stable. Consider adding /home/daniel/fvm/versions/stable/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 54e66469a9 (12 days ago), 2024-04-17 13:08:03 -0700 • Engine revision c4cd48e186 • Dart version 3.3.4 • DevTools version 2.31.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 /home/daniel/Android/Sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /home/daniel/.local/share/JetBrains/Toolbox/apps/android-studio/jbr/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Chrome - develop for the web • Chrome at google-chrome [✓] Linux toolchain - develop for Linux desktop • Ubuntu clang version 14.0.0-1ubuntu1.1 • cmake version 3.22.1 • ninja version 1.10.1 • pkg-config version 0.29.2 [✓] Android Studio (version 2023.1) • Android Studio at /home/daniel/.local/share/JetBrains/Toolbox/apps/android-studio • 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 • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) [✓] VS Code (version 1.87.2) • VS Code at /usr/share/code • Flutter extension version 3.86.0 [✓] Connected device (3 available) • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator) • Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.4 LTS 6.5.0-28-generic • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.91 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```
gambuccigirl commented 2 weeks ago

Version 122.0.6261.128 (Official Build) (64-bit) Linux (not working, accessed remote desktop) Version 124.0.6367.91 (Official Build) (64-bit) Linux upgraded (still not working)

Version 124.0.6367.63 (Official Build) (64-bit) Windows (working, local machine)

The only other thing I wondered is if could have anything to do with the linux machine being accessed via remote desktop (NoMachine)? Since if I deploy to a docker container on the linux machine it appears fine on my local windows machine, but not displayed correctly when accessed via a browser on the linux remote desktop. I don't have a local Linux box available to test this hypothesis. But at this point it doesn't seem likely to be flutter.

I appreciate you having looked into this.

danagbemava-nc commented 1 week ago

Can you walk me through how you did the setup? Maybe I can reproduce under the same environment