如何结合Flutter JS互操作和Provider

Question

我有一个 Flutter 应用程序，它使用 Provider 进行状态管理。

最近我需要将我的 Flutter 应用程序嵌入到 iFrame 中并使用 javascript 调用 dart 函数。

通常要执行此操作，您需要 setProperty(window, 'update', allowedInterop(Controller.update));

我遇到的问题是allowInterop函数要求提供的函数是类中的函数或静态方法。但由于我的函数位于扩展 ChangeNotifier 的类中，因此我不能简单地将我想要使用的类设为静态。这是因为我的 Provider 中的类调用了 notifyListeners() ，而它不能从静态方法中调用。

如何在 Flutter 中使用 Javascript 调用我的 Provider 方法？

我尝试使用静态方法创建一个全局类，但这意味着我监听更改的数据都不会更新。

我尝试删除对 Provider 的要求，但状态管理变得更加困难。

Answer 1

我可以通过使用导航键并使用该键调用我的提供商来实现此目的。

@JS('update')
static Future<Model> update() async {
  ModelController modelController = Provider.of<ModelController>(
   navigatorKey.currentContext!,
   listen: false,
);
  return modelController.updateLesson();
}

此解决方案将来可能会导致问题，因为不能保证 navigatorKey 具有上下文，因为应用程序可能未初始化。如果应用程序在加载时变得太大并且提供程序尚未初始化，或者如果在网站加载时立即调用 javascript 函数，我可以看到这是一个问题。

目前这是一个短期修复，但更好的长期修复是使用不依赖于 get x 等小部件树的状态管理包。