Flutter WebAssembly运行插件wasm_run的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter WebAssembly运行插件wasm_run的使用

简介

wasm_run 是一个用于 Dart 编程语言的 WebAssembly 执行器。它当前使用 wasmtime 14.0 或 wasmi 0.31 Rust 库来解析和执行 WASM 模块，并通过 flutter_rust_bridge 创建绑定。

对于纯 Dart 应用程序（如后端或命令行工具），你可以下载编译后的动态库并指定 WasmRunLibrary.set 函数中的 ffi.DynamicLibrary，或者运行 dart run wasm_run:setup 脚本（或调用 WasmRunLibrary.setUp 函数）来自动下载适合你当前平台的库并配置它，这样你就不需要手动调用 WasmRunLibrary.set。

在 Flutter 项目中，你应该使用 package:wasm_run_flutter，因为它会提供适合你平台的正确二进制文件。

对于 Dart Web 应用程序（不是 Flutter Web），你需要在 HTML 中添加以下脚本来进行功能检测：

<script src="./packages/wasm_run/assets/wasm-feature-detect.js"></script>
<script type="module" src="./packages/wasm_run/assets/browser_wasi_shim.js"></script>

完整示例 Demo

下面是一个完整的示例，展示了如何在 Flutter 项目中使用 wasm_run 插件来加载和执行 WebAssembly 模块。

1. 添加依赖

在 pubspec.yaml 文件中添加 wasm_run_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  wasm_run_flutter: ^latest_version
2. 创建 WebAssembly 模块

创建一个简单的 WebAssembly 模块 add.wat，它包含一个 add 函数：

(module
  (func (export "add") (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add
  )
)

将 add.wat 编译为 WebAssembly 字节码 add.wasm。你可以使用 wat2wasm 工具来完成这一步：

wat2wasm add.wat -o add.wasm
3. 在 Flutter 项目中加载和执行 WebAssembly 模块

创建一个新的 Flutter 项目并在 lib/main.dart 中编写代码来加载和执行 WebAssembly 模块：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:wasm_run_flutter/wasm_run_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('WebAssembly in Flutter')),
        body: Center(child: AddButton()),
      ),
    );
  }
}

class AddButton extends StatefulWidget {
  @override
  _AddButtonState createState() => _AddButtonState();
}

class _AddButtonState extends State<AddButton> {
  String _result = '';

  Future<void> _loadAndRunWasm() async {
    // 读取 WebAssembly 字节码
    final bytes = await rootBundle.load('assets/add.wasm');
    final binary = bytes.buffer.asUint8List();

    // 编译 WebAssembly 模块
    final module = compileWasmModuleSync(binary);

    // 创建实例
    final instance = module.builder().buildSync();

    // 获取导出的函数
    final add = instance.getFunction('add')!;

    // 调用函数并获取结果
    final result = add.call([1, 4])[0];
    setState(() {
      _result = '1 + 4 = $result';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(_result),
        ElevatedButton(
          onPressed: _loadAndRunWasm,
          child: Text('Run WebAssembly'),
        ),
      ],
    );
  }
}
4. 配置 assets

在 pubspec.yaml 文件中配置 assets，以便 Flutter 可以找到 add.wasm 文件：

flutter:
  assets:
    - assets/add.wasm
5. 运行项目

确保你已经安装了所有依赖项并编译了 WebAssembly 模块，然后运行项目：

flutter run

更多关于Flutter WebAssembly运行插件wasm_run的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter WebAssembly运行插件wasm_run的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用wasm_run插件来运行WebAssembly（Wasm）代码的示例。假设你已经设置好了Flutter开发环境，并且已经安装了wasm_run插件。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加wasm_run依赖：

dependencies:
  flutter:
    sdk: flutter
  wasm_run: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 准备Wasm模块

你需要一个已经编译好的Wasm模块文件（例如example.wasm）。你可以使用wat2wasm工具从WebAssembly文本格式（.wat）编译得到Wasm二进制格式（.wasm）。

3. 编写Flutter代码

以下是一个简单的Flutter应用示例，展示了如何使用wasm_run插件来加载和运行Wasm模块：

import 'package:flutter/material.dart';
import 'package:wasm_run/wasm_run.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Wasm Run Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String result = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Wasm Run Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Wasm Result:'),
            Text(result, style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  result = "Loading...";
                });

                // Load and run the Wasm module
                final wasmModule = await rootBundle.load('assets/example.wasm');
                final wasiEnv = WasmRunEnvironment();
                final wasmRunner = WasmRunner(wasiEnv);

                try {
                  await wasmRunner.loadWasmModule(wasmModule);

                  // Assuming the Wasm module exports a function named 'add'
                  // which takes two integers as arguments and returns their sum
                  final resultValue = await wasmRunner.callFunction('add', [10, 20]);

                  setState(() {
                    result = "Result: ${resultValue.toInt()}";
                  });
                } catch (e) {
                  setState(() {
                    result = "Error: ${e.toString()}";
                  });
                }
              },
              child: Text('Run Wasm'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 配置Wasm文件

确保你的Wasm文件（例如example.wasm）已经放在assets目录下，并在pubspec.yaml文件中进行配置：

flutter:
  assets:
    - assets/example.wasm

5. 运行应用

现在你可以运行你的Flutter应用，点击按钮加载和运行Wasm模块，并查看结果。

注意事项

  1. Wasm模块导出函数：确保你的Wasm模块导出了你需要调用的函数，并且参数类型与你在Dart代码中传递的参数类型匹配。
  2. 错误处理：在实际应用中，请添加更多的错误处理逻辑，以处理Wasm模块加载失败、函数调用失败等情况。

以上代码展示了如何在Flutter应用中使用wasm_run插件来加载和运行Wasm模块。根据你的Wasm模块的具体功能，你可能需要调整代码中的函数调用部分。

回到顶部