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

Question

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.

Abhilash Chandran · Accepted Answer · 2020-10-18 11:55:48Z

7

+50

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.

answered Oct 18, 2020 at 11:55

Abhilash Chandran

7,5573 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pjotr_dolphin Over a year ago

Thank you, the solution worked :) I owe you a beer 🤗

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related