Flutter Web项目中如何导入并调用JavaScript文件内的方法

完全可以实现，Flutter Web 原生支持与 JavaScript 侧进行交互，具体操作流程如下：

• 首先将你的 socket 压缩功能 JS 文件放入 Flutter 项目的 web 目录下，推荐新建 web/js 子目录存放，避免和其他入口文件混淆。
• 打开 web/index.html 入口文件，在 Flutter 主入口JS引用之前添加你的JS文件引入代码，示例：

<!-- 放在 main.dart.js 引用之前 -->
<script src="js/socket_compress.js" type="application/javascript"></script>
<script src="main.dart.js" type="application/javascript"></script>

• Dart 侧使用官方内置的 dart:js 包即可调用JS暴露的全局方法，无需额外引入第三方依赖。假设你的JS文件中暴露了全局方法 compressData 接收原始数据返回压缩结果，调用示例如下：

import 'dart:js' as js;

// 同步方法调用示例
Uint8List rawData = ...; // 待压缩的socket原始数据
Uint8List compressedData = js.context.callMethod('compressData', [rawData]);

• 如果你的JS方法挂载在自定义命名空间下，比如 window.SocketTool.compress，调用写法调整为：

import 'dart:js' as js;

dynamic socketTool = js.context['SocketTool'];
Uint8List compressedData = socketTool.callMethod('compress', [rawData]);

注意：Dart 的 Uint8List 类型会自动和 JS 的 Uint8Array 类型互转，完全适配 socket 二进制数据处理场景，不需要额外做类型转换。

如果需要调用JS侧的异步方法，使用Flutter Web内置的 dart:js_util 包的 promiseToFuture 方法即可将JS Promise转为Dart Future处理：

import 'dart:js_util' as js_util;

Future<Uint8List> compressDataAsync(Uint8List raw) async {
  return await js_util.promiseToFuture(js.context.callMethod('compressDataAsync', [raw]));
}

限制说明 #

该方案仅支持Flutter Web平台，如果你需要同时兼容移动端（Android/iOS），现有JS文件无法直接在移动端运行，需要单独实现对应平台的压缩逻辑。

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