Dart JS interop for library using jQuery


I am attempting to use Dart’s package:js to create an interop library for JScrollPane, which is wrapped with jQuery.

Here’s what I have so far:

library jscrollpane;

import 'dart:html';

import 'package:js/js.dart';

abstract class JScrollPaneSettings {
    external factory JScrollPaneSettings({bool showArrows});

    external bool get showArrows;

    external set showArrows(bool value);


class JScrollPane {
    external JScrollPane(Element element, JScrollPaneSettings settings);

And here’s the error:

Not a valid JS object

#0      JsNative.callConstructor (dart:js:1461)
#1      JScrollPane.JScrollPane (package:portal/base/views/scrollbar/jscrollpane.dart_js_interop_patch.dart:13:30)

And here’s the JS library – http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js


Element is from dart:html and is not annoted with @anonymous, you should use the dynamic keyword instead.

class JScrollPane {
  external JScrollPane(dynamic element, JScrollPaneSettings settings);


Since it is a jQuery plugin, I don’t think you can directly access to the JScrollPane, I have never wrap a jQuery plugin, but if you take the example code of the plugin:


You can try to wrap the $ function

external jQuery(query);

class JScrollPaneElement {
  external jScrollPane();

void main() {
  JScrollPaneElement scrollPane = jQuery('.scroll-pane') as JScrollPaneElement;

Answered By – Hadrien Lejard

Answer Checked By – Marilyn (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *