~/VibeHandbook
$39

应用 / 移动端

flutter.dev

Flutter

是什么

Flutter 是 Google 推出的开源 UI 工具包,用 Dart 语言编写单一代码库即可构建跨平台应用。与那些包装原生控件的方案不同,Flutter 用自己的渲染引擎绘制每一个像素,因此 UI 在 iOS、Android、web 和桌面上的外观与行为完全一致。它开箱即带一套丰富的 Material 和 Cupertino 控件。

优势

  • 一份 Dart 代码库即可面向 iOS、Android、web 和桌面,且结果一致。
  • 自带渲染引擎意味着各处 UI 像素级精确、完全相同。
  • 有状态热重载(Stateful Hot Reload)让迭代极其快速。
  • 庞大而精良的控件库以及强大的工具链。
  • 非常适合定制化、品牌感强、动画丰富的界面。

取舍

  • 需要学习 Dart,这门语言几乎只用于 Flutter。
  • 应用二进制体积更大,因为引擎会随应用一起打包。
  • 由于自行绘制控件,平台原生外观的更新可能滞后。
  • 深度的平台集成仍需通过插件使用原生(Swift/Kotlin)代码。

何时使用

当你希望由一个团队在众多平台上交付一款高度精致、视觉一致的应用时——尤其是当定制化设计和流畅动画比精确匹配每个操作系统的原生控件更重要时——可以选择 Flutter。

与 vibe coding 的契合度

Flutter 与 AI 助手配合得很好,因为一切都是由清晰树状结构组合而成的 widget,而热重载让你在几秒内就能验证生成的 UI。可以让模型把树拆分成小而专注的 widget,让状态管理保持显式(例如单一状态类或一个广为人知的包),并优先使用 const 构造函数以提升性能。由于框架是自包含的,生成的代码很少依赖脆弱的原生配置。

class Counter extends StatefulWidget {
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) => Column(children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: const Text('Add'),
        ),
      ]);
}