如何在Flutter中通过JavaScript调用Provider管理的类方法？

核心思路是拿到Provider在Widget树中创建的Controller实例，将其实例方法通过allowInterop包装后挂载到window对象上，这样JavaScript就能直接调用该方法，同时方法内部可以正常执行notifyListeners()。

实现步骤 #

1. 确保Controller是Provider管理的单例 #

假设你的Controller定义如下：

class Controller extends ChangeNotifier {
  int count = 0;

  void update(int newCount) {
    count = newCount;
    notifyListeners(); // 实例方法可正常调用
  }
}

在Widget树中通过ChangeNotifierProvider提供单例：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Controller(),
      child: const MyApp(),
    ),
  );
}

2. 获取Controller实例并挂载方法到window #

在根Widget的initState中，通过WidgetsBinding回调确保Widget树初始化完成后，获取Provider的实例：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // 等待Widget树构建完成，确保能获取到Provider实例
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final controller = Provider.of<Controller>(context, listen: false);
      // 将实例方法包装后挂载到window对象
      setProperty(window, 'updateCount', allowInterop(controller.update));
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Consumer<Controller>(
          builder: (context, controller, child) {
            return Text('Count: ${controller.count}');
          },
        ),
      ),
    );
  }
}

这里listen: false很关键，仅用于获取实例，避免不必要的Widget重建。

3. JavaScript侧调用方法 #

在iframe的父页面或嵌入网页中，直接调用挂载的方法：

// 调用Flutter中Controller的update方法
window.frames[0].updateCount(5);

备选方案：全局保存Controller实例 #

如果不想在Widget的initState中处理，可以在Controller构造函数中保存自身实例（仅适合单例场景）：

class Controller extends ChangeNotifier {
  static Controller? instance;

  Controller() {
    instance = this; // 保存当前实例
  }

  int count = 0;

  void update(int newCount) {
    count = newCount;
    notifyListeners();
  }
}

然后在main函数中延迟执行挂载逻辑：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Controller(),
      child: const MyApp(),
    ),
  );

  // 延迟执行，确保Controller实例已创建
  Future.delayed(const Duration(milliseconds: 100), () {
    if (Controller.instance != null) {
      setProperty(window, 'updateCount', allowInterop(Controller.instance!.update));
    }
  });
}

关键注意点 #

• 必须确保获取到的是Provider管理的实例，否则调用方法不会触发notifyListeners()，导致UI不更新。
• allowInterop会自动绑定实例上下文，方法内部的this指向正确的Controller实例。
• 确保JS传入的参数类型与Dart方法参数类型兼容（如数字、字符串等基础类型）。

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