如何通过package:js在Dart/Flutter中调用JavaScript对象方法

问题根因 #

核心错误出在Dart互操作层的两个错误配置：

1. 不该给TestClass添加@anonymous注解
   @anonymous仅用于匹配JS侧没有对应命名类的普通匿名对象（即直接用{}创建的对象），添加该注解后，Dart侧调用构造函数时实际创建的是普通匿名JS对象，而非TestClass类的实例，只能访问实例自身的foo属性，无法访问原型链上的类方法，这是报错的核心原因。
2. 构造函数参数定义和JS侧不匹配
   JS侧TestClass的构造函数接收位置参数val，你Dart侧定义为命名参数{String foo}，不符合实际入参规则。

修正方案 #

1. 修正Dart互操作层代码

@JS()
library testclass.js;

import 'package:js/js.dart';
   
// 移除@anonymous注解
@JS()
abstract class TestClass {
  // 构造函数和JS侧对齐，使用位置参数
  external factory TestClass(String val);
  external String get foo;
  external void someGenericFunction();
  external String getSomeValue(String foo, String bar);
}

2. 修正业务代码的构造调用

// 传入位置参数构造实例，此时生成的是真正的TestClass类实例
TestClass ts = TestClass("dart");
String foo = ts.foo; // 正常访问
// 方法可正常调用
ts.someGenericFunction();
String testClassString = ts.getSomeValue("one", "two");

内容的提问来源于stack exchange，提问作者Pat9RB