完整的 Flutter Web 应用示例，展示如何让 Flutter 生成的 HTML 调用外部 JavaScript，以及外部 JavaScript 调用 Flutter 生成的 HTML 中的方法。
Flutter 调用外部 JavaScript
你可以使用 dart:js 或 dart:js_interop 库与外部 JavaScript 交互。
Flutter 示例代码
import 'dart:html'; // 用于 DOM 操作
import 'dart:js'; // 用于调用外部 JS
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Flutter 与 JS 交互")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
// 调用外部的 JavaScript 函数
context.callMethod('externalJsFunction', ['Hello from Flutter']);
},
child: const Text('调用外部 JS 函数'),
),
ElevatedButton(
onPressed: () {
// 将 Dart 方法暴露给外部 JS 调用
context['flutterJsFunction'] = (String message) {
window.alert('来自外部的消息: $message');
};
},
child: const Text('暴露 Flutter 方法给外部'),
),
],
),
),
),
);
}
}
HTML 文件
运行 Flutter Web 时，index.html 是主 HTML 文件。这里我们需要在其中定义外部的 JavaScript 函数。
示例 index.html
<!DOCTYPE html>
<html>
<head>
<title>Flutter 与 JavaScript 交互</title>
<script>
// 定义外部 JS 函数
function externalJsFunction(message) {
console.log("Flutter 调用了 JS:", message);
alert("Flutter 调用了外部 JS: " + message);
// 调用 Flutter 暴露的方法
if (window.flutterJsFunction) {
window.flutterJsFunction("Hello back from JavaScript!");
}
}
</script>
</head>
<body>
<script src="main.dart.js"></script>
</body>
</html>
运行后的交互逻辑
- Flutter 调用外部 JS：
• 点击 “调用外部 JS 函数” 按钮。
• Flutter 会调用 externalJsFunction，浏览器会弹出一条消息，并在控制台打印日志。
- 外部 JS 调用 Flutter：
• 点击 “暴露 Flutter 方法给外部” 按钮。
• 调用 externalJsFunction 后，外部 JS 会调用暴露的 flutterJsFunction，浏览器会弹出另一条消息。
关键点
- dart:js 和 dart:html 是互补的：
• dart:js 用于调用 JS 方法。
• dart:html 用于操作 DOM。
- 安全性注意：
• 确保调用的 JS 代码是可信的，避免引入 XSS 漏洞。
- Debug 技巧：
• 使用浏览器的开发者工具查看 console.log 输出，调试 JS 和 Dart 的交互问题。
更多详情可以参考 Flutter Web 官方文档。
