Flutter 中 JavaScript 与 Dart 双向通信实现方案

在 Flutter 项目中实现 JavaScript 与 Dart 双向通信的方案。主要包含基于官方 webview_flutter 插件的通信方式，通过在 pubspec.yaml 添加依赖、配置静态 JS 文件、创建 Dart 交互方法定义及项目启动类配置。同时涵盖了 Web 平台下使用 @JS 注解建立 Dart 与 JS 映射关系，以及利用 @allowInterop 传递 Dart 函数给 JS 作为回调的方法。重点讲解了 postMessage 通道机制、WebViewController 配置及回调处理逻辑。

SqlMaster发布于 2026/3/28更新于 2026/4/162 浏览

基于官方 webview_flutter 插件的通信方式

在 pubspec.yaml 中添加

添加 webview 包方便后面使用，记得 pub get 更新。

dependencies: 
  flutter: sdk: flutter # 移动端 WebView 通信核心依赖
  webview_flutter: ^4.4.4 # Web 平台 JS 通信依赖
  js: ^0.6.7

配置自己使用的 js 路径地址信息，该地址位于项目根目录中添加对应 js 文件。

flutter:
  uses-material-design: true
  assets:
    - assets/js/xxx.js

静态 js 文件，建立通道

function test() {
  if (window.FlutterJsChannel) {
    window.FlutterJsChannel.postMessage(realTimeData);
    console.log(realTimeData);
    console.log("【JS 推送成功】：数据已发送给 Flutter");
  } else {
    console.log("【JS 推送失败】：FlutterJsChannel 不存在");
  }
}

postMessage 通道的核心概念：

postMessage 本质是 Flutter 为 WebView 提供的跨端通信接口，专门用于 JavaScript → Flutter 的数据传递（单向主动推送）。
Flutter 在 WebView 里'预埋'了一个名为 FlutterJsChannel（你自定义的名称）的'消息信箱'。
JS 端只要往这个'信箱'里丢消息（调用 postMessage），Flutter 端的 onMessageReceived 回调就会立刻收到并处理。
WebView 加载的 HTML/JS 中，通过 window.通道名称.postMessage(数据) 发送消息。

Dart 文件创建 web 交互方法定义

相关免费在线工具

Base64 字符串编码/解码

将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online

Base64 文件转换器

将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

Markdown转HTML

将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。在线工具，Markdown转HTML在线工具，online

HTML转Markdown

将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。在线工具，HTML转Markdown在线工具，online

JSON 压缩

通过删除不必要的空白来缩小和压缩JSON。在线工具，JSON 压缩在线工具，online

JSON美化和格式化

将JSON字符串修饰为友好的可读格式。在线工具，JSON美化和格式化在线工具，online

import 'package:webview_flutter/webview_flutter.dart'; late WebViewController _webViewController; _webViewController = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..setBackgroundColor(Colors.white) ..loadHtmlString("""<html><body></body></html>""") ..addJavaScriptChannel("FlutterJsChannel", // 实时接收 JS 传递的数据（持续回调，无需主动触发） onMessageReceived: (JavaScriptMessage message) { print("object"); // 第一步：先打印日志，这是最直接的验证，无关 UI 更新 print("【通道回调触发】：收到数据 -> ${message.message}"); _updateAnimeList(message.message); }); // 步骤 1：读取并加载 Assets 中的 JS 文件（核心：注入 JS 函数） Future<void> _loadAssetsJsFile() async { try { // ① 读取 Assets 中的 JS 文件（转为纯文本字符串） // 路径必须和 pubspec.yaml 中声明的一致（大小写敏感） String assetsJsContent = await rootBundle.loadString("assets/js/md5.js"); // ② 执行该 JS 字符串，将函数注入 WebView 环境 // 此时只是「导入」函数，并未调用具体方法，无返回值 await _webViewController.runJavaScript(assetsJsContent); setState(() { _callResult = "Assets JS 文件加载完成（函数已注入），可调用具体方法"; _callAssetsJsFunction(); print(_callResult); }); } catch (e) { setState(() { _callResult = "加载 Assets JS 文件失败：$e"; }); } } // 步骤 2：调用 Assets JS 文件中定义的具体方法 _callAssetsJsFunction() async { try { // ① 编写 JS 代码，调用已注入的函数（来自 assets/js/demo.js） String jsCode = """ test(); """; // ③ 执行 JS 代码，触发函数调用 _webViewController.runJavaScript(jsCode); print("【Flutter】JS 执行指令已发送给 WebView"); } catch (e) { setState(() { _callResult = "调用 Assets JS 函数失败：$e"; }); } }

Flutter 中 JavaScript 与 Dart 双向通信实现方案

基于官方 webview_flutter 插件的通信方式

在 pubspec.yaml 中添加

静态 js 文件，建立通道

Dart 文件创建 web 交互方法定义

更多推荐文章

相关免费在线工具

项目启动类

Web 平台 - Dart 与 JS 通信

@JS

传递 Dart 函数给 JS（回调）

Flutter 中 JavaScript 与 Dart 双向通信实现方案

基于官方 webview_flutter 插件的通信方式

在 pubspec.yaml 中添加

静态 js 文件，建立通道

Dart 文件 创建 web 交互 方法定义

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

项目启动类

Web 平台 - Dart 与 JS 通信

@JS

传递 Dart 函数给 JS（回调）

Dart 文件创建 web 交互方法定义