Not working with web-renderer=canvaskit

[circum1]

Dear Gábor,

Using flutter_dropzone 1.0.9 and up-to-date flutter. Starting my app with

flutter run -d chrome

works flawlessly, but starting with

flutter run -d chrome --web-renderer=canvaskit

results in that neither callbacks in my DropZoneView widget is called except onLoaded(), and dragging an image opens the image in a new tab in the browser. Is it a known issue?

Thanks,
Ferenc

[deakjahn]

Last time I tried it was still called --dart-define=FLUTTER_WEB_USE_SKIA=true but now I changed and it still seems to work for me (although about two days ago I uninstalled Chrome because I saw that the new Chromium-based Edge could debug Flutter Web just as fine and I don't normally use Chrome for browsing, anyway*). So, I don't know if that makes any difference. If you're on Windows, chances are Edge is automatically available for you as a target, so you might want to check there as well?

Run flutter doctor --verbose and see if it lists it as a connected device, it should be as simple as

flutter run -d edge --web-renderer=canvaskit

* No, not Edge, perish the thought, just a different Chromium-based browser, Vivaldi. :-)

[deakjahn]

Yep, confirmed, it was as simple as that and it still works for me...

[circum1]

Unfortunately, I am on linux.

I fear I did not get your point -- are you saying it is working for you, even with Chrome? Should I post a streamlined test app that fails on my machine?

I don't know what --dart-define=FLUTTER_WEB_USE_SKIA=true does, but starting the app as

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true

does not work either.

Linux Mint 20 (ubuntu 20.04 based), Google Chrome 86.0.4240.75

[deakjahn]

Yes, that's exactly what I'm saying. For reasons entirely unrelated to this package, I moved to CanvasKit completely and never looked back, to the extent of contributing some missing functionality to the CanvasKit engine that was a showstopper for my code. So, all my development and tests, even with something as unrelated as this dropzone plugin, were always done on CanvasKit and I only switched back to DomCanvas temporarily a few times to see that it still works.

As to Chrome, as I said, I just removed it a few days ago, so I'm not willing to say it still works until I find out. :-) I'll install it now and report back. Edge/Chromium works for me, that's sure.

[deakjahn]

Chrome installed, debug: works; release: works. Let's see the versions:

• Chrome: Version 87.0.4280.141 (Official Build) (64-bit)
• Edge: Microsoft Edge 87.0.664.75

[√] Flutter (Channel beta, 1.25.0-8.2.pre, on Microsoft Windows [Version 10.0.19042.685], locale en-US)
• Flutter version 1.25.0-8.2.pre at E:\Android\flutter-beta
• Framework revision b0a2299859 (5 days ago), 2021-01-05 12:34:13 -0800
• Engine revision 92ae191c17
• Dart version 2.12.0 (build 2.12.0-133.2.beta)

[deakjahn]

Just for info:

I don't know what --dart-define=FLUTTER_WEB_USE_SKIA=true does, but starting the app as

It's a moving target but as far as I know, that's still the actual define that turns CanvasKit on inside Flutter Web, only that they have recently introduced the new --web-renderer flag on the surface, to provide a nicer way to specify it, but deep inside this still gets transformed to the old define by the toolchain.

[circum1]

Hmm, that's strange. Created an empty project and updated chrome to evaluate the issue.

Chrome: 87.0.4280.141 (Official Build) (64-bit)

[✓] Flutter (Channel dev, 1.26.0-1.0.pre, on Linux, locale en_US.UTF-8)
• Flutter version 1.26.0-1.0.pre at /home/fery/prg/flutter
• Framework revision 63062a6443 (4 weeks ago), 2020-12-13 23:19:13 +0800
• Engine revision 4797b06652
• Dart version 2.12.0 (build 2.12.0-141.0.dev)
[...]
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Linux
• Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.141

Code:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Dropzone Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Center(
          child: Container(
            color: Colors.green,
            child: ConstrainedBox(
              constraints: BoxConstraints(maxHeight: 100),
              child: buildZone1(context),
            ),
          ),
        ));
  }

  Widget buildZone1(BuildContext context) => Builder(
        builder: (context) => DropzoneView(
          operation: DragOperation.copy,
          cursor: CursorType.grab,
          // onCreated: (ctrl) => dropzoneCtrl = ctrl,
          onLoaded: () => print('Zone 1 loaded'),
          onError: (ev) => print('Zone 1 error: $ev'),
          onHover: () {
            print('Zone 1 hovered');
          },
          onLeave: () {
            print('Zone 1 left');
          },
          onDrop: (ev) {
            print('Zone 1 drop: ${ev.name}');
          },
        ),
      );
}

Still only the onLoaded callback is executed.

Attached a screenshot of the page structure -- there is a full-window canvas before and after the dropzone-container div -- maybe that causes this issue?

The width/height values may look strange because of my 4K display -- I don't know, I am really not familiar with browser / web stuff in such a deep detail.

It seems the event handler is registered many times because it is registered again every time I resize the window, for example -- IMHO that's an incidental finding.

[circum1]

FYI, swithing off the UI scaling does not affect the issue.

[deakjahn]

Yes, I can see the resize handler proliferation, this is something I have to look into. But other than that, my setup looks remarkably similar to yours and it still works, you can see the dropped file actually registered on the top half.

[circum1]

Do you have any idea how can I help you with further investigation on my system?

[deakjahn]

Yep, I've just realized that I use the same environment variable inside the code to determine whether it's CanvasKit or not. So, considering that you're already on dev, let's check if this returns something else than for me. Add this line to flutter_dropzone_web.dart, line 39 before the if:

print(const bool.fromEnvironment('FLUTTER_WEB_USE_SKIA', defaultValue: false));

And let's see if you receive true in CanvasKit and false in DomCanvas, in the console.

[deakjahn]

This looks like a moving target and, what's worse, we'll probably end up needing the JavaScript side to determine because we also have an auto setting that we don't know which engine it will end up using. Not very happy about it...

https://stackoverflow.com/questions/64583461/how-to-use-skia-canvaskit-in-flutter-web

There will probably be a constant to provide this value to the Flutter side:

flutter/engine#21852
flutter/flutter#73369

[deakjahn]

Try cbd1c89. I won't push it to Pub now because this one forces CanvasKit temporarily, until the problems linked above are solved and we can reliably learn what renderer we're running on.

I'll also look into the issue of many handlers.

[deakjahn]

I'm giving it up right now for two reasons:

• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#multiple_identical_event_listeners suggests that this doesn't cause any problem, repeated listeners are discarded and they're only called once (and this is actually what I can see here);
• there is actually NO way whatsoever, as much as can tell by searching the web high and low, to check whether a listener already is attached (there is a special function but only on Chrome and only in dev mode, so it doesn't help us).