Draggable doesn't show dragging on Web #147435

gambuccigirl · 2024-04-26T20:46:46Z

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

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

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

[✓] 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 · 2024-04-26T21:22:56Z

2024-04-27.00-21-28.mp4

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

danagbemava-nc · 2024-04-29T07:17:44Z

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?

Screen.Recording.2024-04-29.at.07.13.39.mov

gambuccigirl · 2024-04-29T15:59:17Z

2024-04-29.08.42.22.mp4

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 · 2024-04-30T07:00:06Z

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 · 2024-04-30T17:21:44Z

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 · 2024-05-02T07:13:34Z

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

danagbemava-nc added the in triage Presently being triaged by the triage team label Apr 29, 2024

danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 29, 2024

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 29, 2024

danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2024

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Apr 30, 2024

danagbemava-nc added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Draggable doesn't show dragging on Web #147435

Draggable doesn't show dragging on Web #147435

gambuccigirl commented Apr 26, 2024

ReinisSprogis commented Apr 26, 2024

danagbemava-nc commented Apr 29, 2024

gambuccigirl commented Apr 29, 2024

danagbemava-nc commented Apr 30, 2024

gambuccigirl commented Apr 30, 2024

danagbemava-nc commented May 2, 2024

Draggable doesn't show dragging on Web #147435

Draggable doesn't show dragging on Web #147435

Comments

gambuccigirl commented Apr 26, 2024

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

ReinisSprogis commented Apr 26, 2024

danagbemava-nc commented Apr 29, 2024

gambuccigirl commented Apr 29, 2024

danagbemava-nc commented Apr 30, 2024

gambuccigirl commented Apr 30, 2024

danagbemava-nc commented May 2, 2024