FlutterJS – 运行 Flutter 代码，获取语义化 HTML 输出
大家好！我是FlutterJS的创始人。
问题：Flutter Web非常适合构建应用程序，但对于网站来说却很糟糕。它将所有内容渲染到Canvas/WASM，这意味着：
- 2-5 MB的包（在移动设备上加载缓慢）
- 零SEO——谷歌无法索引Canvas像素
- 较差的可访问性（没有语义化的HTML供屏幕阅读器使用）
- 初始加载时间为3-8秒
如果你曾尝试使用Flutter Web构建营销网站或博客，你一定遇到过这个问题。
解决方案：FlutterJS将你的Flutter/Dart代码编译为语义化的HTML + CSS + JavaScript，而不是Canvas。使用的语法与Flutter相同，但输出为：
- ~50-100 KB的包（小50倍）
- 完全支持SEO（真实的HTML元素）
- 首次渲染时间少于1秒
- 默认可访问
工作原理：
1. 你编写普通的Flutter/Dart代码
2. 我们的Dart CLI分析你的AST并生成中间表示（IR）
3. IR被转译为JavaScript，并使用轻量级运行时
4. 输出为搜索引擎可以索引的语义化HTML
当前状态：测试版（v0.9.x）。我们支持最常见的Material组件（Scaffold、AppBar、Text、Button、Row、Column、StatefulWidget等）。动画支持和完整的Material 3在开发计划中。
已知限制：
- 目前并非所有Flutter组件都已实现（请参见README中的兼容性矩阵）
- 方法的拆分目前需要用lambda包裹
- 复杂的动画尚不支持
- 这更适合内容丰富的网站，而不是图形密集型应用
我为什么要构建这个：我遇到了许多客户，他们喜欢Flutter的开发体验，但需要他们的网站在谷歌上排名。Flutter Web无法做到这一点。我希望能够兼得两者的优点。
我非常希望听到你的反馈，特别是：
- 你是否在使用Flutter Web时遇到了这个SEO问题？
- 你在使用场景中需要哪些组件？
- 对这种方法有任何顾虑吗？
欢迎提出关于架构、性能声明或开发计划的问题！
查看原文
Hey HN! I'm the creator of FlutterJS.
The Problem: Flutter Web is great for building apps, but terrible for websites. It renders everything to Canvas/WASM, which means:
2-5 MB bundles (slow on mobile)
Zero SEO – Google can't index canvas pixels
Poor accessibility (no semantic HTML for screen readers)
3-8 second initial load times
If you've ever tried to build a marketing site or blog with Flutter Web, you've hit this wall.
The Solution: FlutterJS compiles your Flutter/Dart code to semantic HTML + CSS + JavaScript instead of Canvas. Same Flutter syntax you already know, but the output is:
~50-100 KB bundles (50x smaller)
Full SEO support (real HTML elements)
Sub-1-second first paint
Accessible by default
How it works:
You write normal Flutter/Dart code
Our Dart CLI analyzes your AST and generates an Intermediate Representation (IR)
The IR gets transpiled to JavaScript with a lightweight runtime
Output is semantic HTML that search engines can index<p>Current Status: Beta (v0.9.x). We support the most common Material widgets (Scaffold, AppBar, Text, Button, Row, Column, StatefulWidget, etc.). Animation support and full Material 3 are on the roadmap.
Known Limitations:
Not all Flutter widgets are implemented yet (see compatibility matrix in README)
Method tear-offs need wrapping in lambdas for now
Complex animations aren't supported yet
This is best for content-heavy sites, not graphics-intensive apps
Why I built this: I kept running into clients who loved Flutter's DX but needed their sites to rank on Google. Flutter Web couldn't do that. I wanted the best of both worlds.
I'd love your feedback, especially:
Have you hit this SEO wall with Flutter Web?
What widgets would you need for your use case?
Any concerns about the approach?
Happy to answer questions about the architecture, performance claims, or roadmap!