如何在Flutter Web中从异步JS函数到Dart获得回调或返回值?

Question

我正在尝试执行JSnative code in Flutter web我知道如何调用JS函数fromDart但是无法找到任何解决方法来从JS获得结果到飞镖.

下面是JS代码和Dart代码，我试图以不同的方式实现，但没有得到任何成功。

JS代码:

let fileHandle;
let finalResult;
async function fileOpen() {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
console.log('File info ----> ', file);
if (file != null) {
const parser = new window.AppInfoParser(file);
const result = await parser.parse();
console.log('app info ----> ', result);
console.log('icon base64 ----> ', result.icon);

finalResult = result;

} else {
finalResult = 'File not selected';
console.log('File not selected')
}
return finalResult;
// return Promise.resolve(finalResult)
}

Dart代码:

示例1:直接调用JS函数，不需要回调。

import 'dart:js' as js;
// Call below on any click event
js.context.callMethod('fileOpen')

示例2:在JS代码执行之前得到错误。Uncaught (in promise) TypeError: jsPromise.then is not a function at Object.promiseToFuture (js_util.dart:275:35).

import 'dart:js' as js;
import 'package:js/js_util.dart';
// Call below on any click event
dynamic result = await promiseToFuture<dynamic>(js.context.callMethod('fileOpen'));

示例3:JS代码执行后出现错误。NoSuchMethodError: tried to call a non-function, such as null: 'obj[$toString]'ORExpected a value of type 'Future<dynamic>', but got one of type 'LegacyJavaScriptObject'.

import 'package:js/js_util.dart';
import 'package:js/js.dart';
@JS('fileOpen')
external dynamic fileOpen;
// Call below on any click event
dynamic result = await promiseToFuture(fileOpen());

需要一种方法将结果返回到dart。

Answer 1

错误信息NoSuchMethodError为您指明了正确的方向。在你的JS代码中fileOpen是一个函数，在你的dart代码中它只是一个变量。

你错过了最后的():fileOpen()

编辑:刚刚看到你在github上打开了一个已经解决的问题:https://github.com/dart-lang/sdk/issues/50530