CODEWITHSUNDEEP
javascriptdart
BraveNewMath
BraveNewMath

Reputation: 8333

calling javascript from Dart

i was able to fire off an alert message from dart, but couldn't figure out how to call a function I wrote in another js file from dart. This would have been a great selling point if it was straight forward. I did see this post, which got me started, but i feel there must be a way, so please share the love if you figured it out.

Here's what I've done:

  1. Add this to yaml file:

    dependencies: js: hosted: js

  2. Add import statement to top of dart file: import 'package:js/js.dart' as js;

  3. Add this bit of code to show alert message

    js.scoped(() { js.context.alert("jump for joy!"); });

  4. Here's the part which I think should work but doesn't: given that I have a javascript function doSomething(), I should be able to call

    js.context.doSomething();

Upvotes: 26

Views: 22580

Answers (2)

Mohsin AR
Mohsin AR

Reputation: 3108

Maybe my answer will be worth it for somebody, so that's why I'm posting a simple JS function call from Dart.

  1. Add the js package dependency: 
    dependencies:
  js: any
  2. Create a JS file, let's say example.js: 
    function test() {
  return 12+20;
}
  3. Add the example.js above inside index.html with the <script src="..."> tag.
  4. Interop the function above from JS to Dart: 
    @JS()
library t;

import 'package:js/js.dart';

@JS()
external int Test();

class MyOwn {
  int get value => Test();
}
  5. And, in AngularDart's TODOLIST — which is default component available —: 
    @override
Future<Null> ngOnInit() async => print(MyOwn().value);

Upvotes: 12

Alexandre Ardhuin
Alexandre Ardhuin

Reputation: 76353

First add the js package as dependency in your pubspec.yaml :

dependencies:
  js: any

Then you can use your own js function myFunc() like that :

import 'package:js/js.dart' as js;

main() {
  js.context.myFunc();
}

js.context is an alias to javascript window.

See Using JavaScript from Dart: The js Library for more details.

Upvotes: 21

Related Questions