FlutterJS：我构建了一个输出真实 HTML（而非 Canvas）的 Flutter 编译器

Source: Dev.to

没有人谈论的问题

Flutter Web 有一个秘密：它并不是真正的“网页”。
当你构建一个 Flutter Web 应用时，所有内容都会渲染到 <canvas> 元素中。这对复杂的应用来说可以工作，但对网站来说会产生严重的问题：

• 没有 SEO – Google 无法索引 canvas 像素
• 体积庞大 – 最低 2–5 MB，即使是简单的应用也如此
• 可访问性差 – 没有语义化的 HTML 供屏幕阅读器使用
• 首次渲染慢 – 需要 3–8 秒才能看到内容

我在为客户构建一个营销站点时碰到了这堵墙。页面看起来很漂亮，但 Google Search Console 显示零曝光。站点根本不可见。

如果 Flutter 编译成真实的 HTML 会怎样？

这正是我实现的。FlutterJS 接受你常规的 Flutter/Dart 代码：

Scaffold(
  appBar: AppBar(title: Text('My Site')),
  body: Center(
    child: Text('Hello, World!'),
  ),
)

并输出语义化的 HTML：

<div class="my-site">
  <h1>My Site</h1>
  <p>Hello, World!</p>
</div>

工作原理

• 编写普通的 Flutter 代码 —— 不需要特殊语法。
• 一个 Dart CLI 对你的抽象语法树（AST）进行完整的类型解析。
• 生成带有轻量级 VNode 运行时的 JavaScript。
• 输出搜索引擎可以索引的语义化 HTML。
• JavaScript 运行时负责 diff 和更新，类似于 React 的虚拟 DOM，但针对 Flutter 的 widget 模型进行了优化。

指标对比

路线图

• 动画
• 高级 Material 组件（Tabs、Dialog、BottomSheet）
• Cupertino 组件
• CustomPainter

架构已经支持这些功能，只是还没有实现。

入门指南

# 克隆仓库
git clone --recursive https://github.com/flutterjsdev/flutterjs.git
cd flutterjs

# 激活 Dart CLI
dart pub global activate --source path .
dart pub get
dart run tool/init.dart

# 使用 flutterjs 命令
flutterjs --help

打开 http://localhost:3000 并检查页面——你会看到真实的 HTML 元素。

• 网站：
• GitHub：
• pub.dev：

我需要你的帮助

这是开源项目，我正在寻找贡献者。如果你关心 Flutter 在 Web 上的表现：

• 测试并报告 bug
• 为缺失的组件贡献代码
• 帮助完善文档

你在使用场景中需要哪些组件？在评论中告诉我吧。