flutter web中Flutter与js相互调用

1、Flutter调用JS端方法，含参数和返回值

index.html 端

……
<script type="text/javascript">
// js端方法
function add(int a, int b){
  return a + b;
}
……

Flutter端

1. 引入js库

import 'dart:js' as js;

2. 调用js端方法

var sum = js.context.callMethod('add', [12, 34]);
debugPrint("Flutter调用JS端方法add(12,34)结果为：$sum");

2、JS调用Flutter端方法，含参数和返回值

Flutter端

1. 引入js库

import 'dart:js' as js;

2. 编写Flutter端方法

int add(int a, int b){
  return a + b;
}

3. 注册到js组建

@override
  Widget build(BuildContext context) {
     js.context["add"]=add;

……
}

index.html 端

……
<script type="text/javascript">
// js端方法
function test(){
    var sum = window.add(12,23);
    alert("JS调用Flutter端方法add(12,23)结果为：" + data);
}
……

PS：为了模拟JS调用Flutter，可在Flutter端触发JS端的test()方法。

js.context.callMethod("test")