Flutter

是什麼

先打個比方："跨平臺"就像用同一份菜譜，在每個廚房裡都做出同一道菜，而不是為每一個爐灶都從頭重寫一遍做法。Flutter 是 Google 推出的開源 UI（使用者介面，螢幕上看得見、可互動的部分）工具包，用 Dart 語言編寫單一程式碼庫即可構建跨平臺應用。與那些複用裝置自帶的螢幕控制元件的方案不同，Flutter 用自己的渲染引擎繪製每一個畫素，因此 UI 在 iOS、Android、web 和桌面上的外觀與行為完全一致。它開箱即帶一套豐富的 Material 和 Cupertino 控制元件。

優勢

• 一份 Dart 程式碼庫即可面向 iOS、Android、web 和桌面，且結果一致。
• 自帶渲染引擎意味著各處 UI 畫素級精確、完全相同。
• 就像你編輯一份文件時改動會立刻顯現、無需重新開啟檔案那樣，有狀態熱過載（Stateful Hot Reload）讓迭代極其快速。
• 龐大而精良的控制元件庫以及強大的工具鏈。
• 非常適合定製化、品牌感強、動畫豐富的介面。

取捨

• 需要學習 Dart，這門語言幾乎只用於 Flutter。
• 應用二進位制體積更大，因為引擎會隨應用一起打包。
• 由於自行繪製控制元件，平臺原生外觀的更新可能滯後。
• 深度的平臺整合仍需通過外掛使用原生（Swift/Kotlin）程式碼。

何時使用

當你希望由一個團隊在眾多平臺上交付一款高度精緻、視覺一致的應用時——尤其是當定製化設計和流暢動畫比精確匹配每個 OS（作業系統，裝置的核心軟體，如 iOS 或 Android）的原生控制元件更重要時——可以選擇 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'),
        ),
      ]);
}