假设你是一名前端，平时写 React、用 TypeScript、靠 npm 装包。话说回来，有一天你发现团队里还并行着一个 App。用的是 Flutter，语言是 Dart。你会自然冒出三个念头：

• 我会的这些，能不能直接搬过去？Flutter 是不是就是「App 版的 React」，Dart 是不是就是「另一种 JS」？
• 我们设计师在 Figma 里定的那套颜色、圆角、间距。能不能一次定义、Web 和 App 一起用，风格永远不跑偏？
• 如果这一整套想让一个人维护，现实吗？我得先补哪些课，

这三个问题牵出的其实是一整片「跨端」的地图：语言与环境的对照、设计令牌怎么统一双端、Flutter 到底怎么渲染、原生 App 怎么建立出包、iOS 和 Android 的建立环境差在哪，还有 React Native、Flutter、Kotlin Multiplatform 这些方案各自走到了哪一步。

这篇文章不吹某一种技术，也不劝你转岗写 App。它更像一篇写给前端的「综述」：把这些散落的知识点。用你熟悉的前端概念做锚点，一次性串成一张能看懂全貌的地图。所有涉及版本和现状的事实都以 年 月官方信源为准。文末统一列出，方便你自己追溯核对。

一、用已知类比未知：Flutter 对 React，Dart 对 JS/TS。pub 对 npm

前端跨进 Flutter 的第一步先是把陌生名词挂到熟悉钩子上。好消息是的观点是，大量概念确实能一一对应。

再看语言与框架，像。 但不是同一个东西

Flutter 和 React 共享同一套心智模型——声明式 UI加上组件化&状态驱动重渲染. 看两段几乎对称代码：

// React：一个计数按钮
function Counter {
const = useState;return  setCount}>点了 {count} 次;}

// Flutter：一样一个计数按钮
class _CounterState extends State {
int count = 0;@override
Widget build {
return TextButton(
onPressed: => setState => count++)。child: Text,);}
}

useState 对应 setState。return JSX 对应 build 返回 Widget 树,onClick 对应 onPressed. 连热重载 Flutter 也有，而且体验一样丝滑。

Dart 与 JS/TS 的对照也很整齐：

S一句话的观点是，语法和框架层面上手经验能迁移七八成。 

说到包管理，pub 确实对应 npm

Dart 的包管理器 pub 与 npm 非常相似：

# 相同语法 && Semver 支持一致性约束写法相同