How to pass options to javascript function using dart:js?

flutter dart flutter-web dart-js-interop

669

You should define your objects separately as shown in sample below. The reason is javascript is opaque to dart classes including JSObject. As the documentation suggests its just a proxy for you to access a js ojects properties in Dart. I am not sure if you can use it.

However if you already know the structure of the object you want to pass then you can define an anomymous class with that structure and pass it the defined JS function. Then dart2js will take care of the conversion appropriately.

@JS('window')
library whatever;

import 'dart:js';

import 'package:js/js.dart';
import 'package:flutter/material.dart';

@JS('theObjectCall') // Accessing method getCurrentPosition from Geolocation API
external void theJsObjectCall(ObjectYouWantToSend theObject);

void someJsCallWithObject() {
  ObjectYouWantToSend oywts = ObjectYouWantToSend(a: 'xyz');
  theJsObjectCall(oywts);
}

@JS()
@anonymous
class ObjectYouWantToSend {
  external factory ObjectYouWantToSend({
    String a,
  });
  external String get a;
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: Center(
            child: FlatButton(
              onPressed: someJsCallWithObject,
              child: Text('Call The js Function.'),
            ),
          ),
        ),
      ),
    );
  }
}

You can find the code here in my repo.

This is how it looks when deployed.

669

Author by

pjotr_dolphin

Lead of Dolphin KISS Finland/Hong Kong/Romania with around 20 employees. Background from physics, mathematics and technology. Heading development of analysis/learning software. Lovely son and girlfriend... Golf freak with career low 2.3 in handicap...

Updated on December 01, 2022

Comments

pjotr_dolphin over 1 year

I have the following functional javascript code to demonstrate what I want to achieve. It should output the object passed to the method, and then the value of the property "a".

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <script>
    window.theObjectCall = function(x) {
      console.log(x);
      console.log(x.a);
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

I have the following dart code, and it works, but "a" is not accessible as I expect.

@JS('window')
library whatever;

import 'dart:js';

import 'package:js/js.dart';

@JS('theObjectCall') // Accessing method getCurrentPosition from Geolocation API
external void theJsObjectCall(JsObject theObject);

void someJsCallWithObject() {
  var object = JsObject(context['Object']);
  object['a'] = 'xxx';
  theJsObjectCall(object);
}

Executing the below logs "undefined" in the console.