the goal is to be able to wait for dart code to process and receive its output in the javascript context but i am not being able to.
I am not able to wait with dart:js (code1).
I am able to wait using flutter_js(code2) .
the issue with flutter_js is that it does not work with flutter web.
is is possible to wait with dart:js or another package that works with flutter web?
i found this stack overflow that is similar ::
How to asynchronously call JavaScript in Flutter?
How to get callback or return value from async JS function to Dart in Flutter Web?
https://github.com/dart-lang/sdk/issues/50530
the second and third link were exatactly what i was looking for a think but i dont understand what the answer was.
any help is greatly appreciated it/
code1::
import 'package:flutter/material.dart';
import 'dart:js' as js;
import 'package:flutter/material.dart';
class JsCompilerUtil {
Future<bool?> process_client_script({
required String script,
required Map<String, dynamic> current,
}) async {
js.JsObject jsObject = js.JsObject.jsify(current);
js.context['c'] = jsObject;
// js.context['c'] = current;
var result = js.context.callMethod("eval", [script]);
return result;
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
JsCompilerUtil jsCompilerUtil = JsCompilerUtil();
@override
void initState() {
// TODO: implement initState
super.initState();
*initialize*data();
}
Future<void> *initialize*data() async {
String script = """
console.log("Hi from js, this is the inputed name: "+c.name);
var res = c.dummyWait();
console.log("res:")
""";
Map<String, dynamic> current = {
"name": "Juan",
"dummyWait": dummyWait
};
final res = await jsCompilerUtil.process_client_script(script: script, current: current);
}
@override
Widget build(BuildContext context) {
return SizedBox();
}
Future<String> dummyWait() async {
print("dummyWait()n");
await Future.delayed(const Duration(seconds: 1));
return 'MESSAGE FROM DART';
}
}
output of code1::
Restarted application in 28ms.
The debugEmulateFlutterTesterEnvironment getter is deprecated and will be removed in a future release. Please use `debugEmulateFlutterTesterEnvironment` from `dart:ui_web` instead.
Hi from js, this is the inputed name: Juan
dummyWait()
res:
code2:
import 'package:flutter/material.dart';
import 'package:flutter_js/flutter_js.dart';
import 'dart:convert';
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late JavascriptRuntime flutterJs;
@override
void initState() {
super.initState();
flutterJs = getJavascriptRuntime();
_setupJavaScriptBridge();
}
void _setupJavaScriptBridge() {
flutterJs.onMessage('dummyAwait', (args) async {
String result = await dummyAwaitFunction();
return result;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('JavaScript in Dart'),
),
body: Center(
child: ElevatedButton(
onPressed: _logic,
child: Text('Run JavaScript'),
),
),
);
}
Future<void> _logic() async {
String result = await runJavaScript();
print("JavaScript result: $result");
}
Future<String> runJavaScript() async {
// Dart map
final current = {"name": "juan"};
// Convert Dart map to JSON string
String jsonString = jsonEncode(current);
// JavaScript script to parse JSON string, call Dart function, and print result
String script = '''
var current = JSON.parse('$jsonString');
async function waitForDart() {
var res = await sendMessage('dummyAwait');
console.log("INSDE OF JS: " + res);
return res;
}
waitForDart();
''';
// Evaluate JavaScript script
JsEvalResult jsResult = await flutterJs.evaluateAsync(script);
return jsResult.stringResult;
}
Future<String> dummyAwaitFunction() async {
await Future.delayed(const Duration(seconds: 1));
return 'MESSAGE FROM DART';
}
}