Flutter 网页上的 Index.html答案

【问题标题】：Index.html on flutter webFlutter 网页上的 Index.html
【发布时间】：2021-06-22 17:15:28
【问题描述】：

有没有办法在flutter web文件夹上的index.html文件与dart主文件之间进行通信，我需要运行一个javascript代码来获取输出，并可能在main.dart上显示它。

【问题讨论】：

【解决方案1】：

Dart.js 是一个可以与 JavaScript 互操作的内置库。

在web目录下创建一个js文件，添加一些函数。它从全局 Window 执行上下文中调用该函数。你可以定义一个顶层函数，或者直接在窗口上定义值。

function alertMessage(text) {
alert(text)
}

window.logger = (flutter_value) => {
   console.log({ js_context: this, flutter_value });
}

通过 HTML 文档头部的脚本标签使 JS 全局可用。使用 defer 确保它在 HTML 正文之后加载。

<head>
<script src="app.js" defer></script>
</head>

使用 Dart.js 调用 JS 函数 Flutter 现在可以访问你的全局 JS 函数和变量。使用 callMethod 按名称调用函数，并可选择传递参数列表。

import 'dart:js' as js;

 js.context.callMethod('alertMessage', ['Flutter is calling upon 
  JavaScript!']);

【讨论】：