Flutter Web 调用 JavaScript 代码 - 完整指南

在 Flutter Web 中，可以使用 dart:js 库来调用 JavaScript 代码。以下是一个完整的指南，帮助您在 Flutter Web 应用中使用 JavaScript。

1. 配置 Flutter Web 项目

首先，确保您的 Flutter 项目已配置为支持 Web。

• 创建一个新的 Flutter Web 项目：

flutter create my_web_project

• 进入项目目录：

cd my_web_project

2. 添加依赖项

在 pubspec.yaml 文件中，添加 js 包的依赖项：

dependencies:
  flutter:
    sdk: flutter

  js: ^0.6.1

• 获取依赖项：

flutter packages get

3. 编写调用 JavaScript 代码的 Dart 文件

创建一个新的 Dart 文件（例如 main.dart），并将以下代码添加到文件中：

import 'dart:js' as js;

void main() {
  js.context.callMethod('alert', ['Hello from Dart!']);
}

4. 运行 Flutter Web 应用

运行以下命令，在 Web 浏览器中运行您的 Flutter Web 应用：

flutter run -d chrome

5. 查看结果

在 Web 浏览器中打开应用程序后，您应该看到一个弹出窗口显示“Hello from Dart!”。这是通过调用 JavaScript 的 alert 函数来实现的。

进阶使用

dart:js 库允许您进行更复杂的交互，例如：

• 调用 JavaScript 函数
• 访问 JavaScript 对象
• 操作 DOM 元素

示例：调用 JavaScript 函数

import 'dart:js' as js;

void main() {
  // 假设您有一个名为 `myJsFunction` 的 JavaScript 函数
  js.context.callMethod('myJsFunction', ['参数1', '参数2']);
}

文档参考

有关 dart:js 库的更多信息，请参阅官方文档：https://api.flutter.dev/flutter/dart-js/dart-js-library.html

通过以上步骤，您现在可以轻松地在 Flutter Web 应用中调用 JavaScript 代码，实现更加强大的功能和交互。