Flutter 簡介

Flutter 是 Google 開發的跨平臺開源UI框架，自2015年4月發表至今，已支援 Android、iOS、Windows、Mac、Linux、Google Fuchsia開發應用。

跨平台自繪引擎

Flutter 透過自己的自繪引擎，能夠保證多平台上的 UI 一致性，也能避免對原生元件依賴而帶來的限制與高昂的維護成本。Flutter 引擎主要使用 C++ 開發，以 Google 的 Skia 圖形庫提供底層彩現支援。Skia 為 2D 圖形處理函式庫，包含自行、座標轉換以及點陣圖都有高校的表現，目前 Google Chrome 與 Android 都是採用 Skia 作為繪圖引擎。

相較於 JavaScript 的高效能

Flutter 採用 Dart 語言開發，Dart 在 JIT 模式下，速度與 JavaScript 相同。但是 Dart 還有 AOT 模式，在 AOT 模式下，JavaScript 就遠遠跟不上了。速度的提升對高幀率的畫面計算很有幫助。另外，Flutter 使用自己的渲染引擎來繪製 UI，佈局數據都由 Dart 語言直接控制，所以在佈局上不需要像 Reactive Native 那樣，要在 JavaScript 和 原生元件間通信，這樣在滑動或拖移的場景下明顯有優勢，因為滑動與拖動的狀況下，都要重新佈局，JavaScript 必須不定的跟原生不同步佈局，效能不足。

Flutter 為何選擇 Dart

在說明 Google 選擇 Dart 之前需要先了解 JIT 與 AOT 概念。

JIT(Just-in-time)

動態編譯：一句句邊翻譯邊執行。這類的代表有 JavaScript 與 Python 等。

AOT(Ahead of time)

靜態編譯：在程式執行前全被翻譯成機器碼。這類的代表為C/C++ 開發的應用程式。

支援 AOT 與 JIT 模式

這類的代表有 Java 與 Python，他們可以在第一次執行時編譯城中間碼，在之後執行時直接執行 ByteCode，雖然 ByteCode不是機器碼，執行時仍需要動態的將 ByteCode 轉為機器碼。

官方說明（以 JavaScript 為比較基礎）

開發效率高

Dart 執行時和編譯器支援的 Flutter 的兩個關鍵特性的組合：

• 基於 JIT 的快速開發週期：開發階段 Flutter 開發階段採用 JIT 模式，這樣就避免每次改動都要重新編譯，節省了開發時間。
• 基於 AOT 的執行檔：Flutter 在發布時可以透過 AOT 生成高效的 ARM 以保證 App 的效能。JavaScript 不具有這個能力。
  #### 高效能
  Flutter 提供流暢、高保真的 UI 體驗。相較於JavaScript，由於 Dart 支援 AOT，而 JavaScript 則無，就這點而言，能夠提供更好的效能。
  #### 快速 Memory 分配
  Flutter 使用 函數式響應式編程(FRP) 使得他有很大的程度依賴底層的 Memory Allocator。因此有一個厲害的 Memory Allocator 就顯得十分重要。Chrome 的 JavaScript 引擎做得很好，Dart 開發團隊大多都是 Chrome 團隊來的，因此 Memory 分配並不能作為超越 JavaScript 的優勢。
  #### type-safe
  Dart 是 type-safe 的語言，在編譯之前就可以發現一些 type 的錯誤，提前排除問題。JavaScript 是弱型別的語言在執行時，發生錯誤才會發現問題，擁有淺在的危險。也因此，有很多人為此開發檢查工具或是擴充語言。如TypeScript 語言。
  #### Dart 團隊與 Flutter 團隊密切合作
  兩團隊密切合作是很重要的！例如 Flutter 最初用 Dart 的時候，該語言並沒有提供生成二進制的工具，但現在 Dart 已經支援了，這是因為 Dart 團隊專門為了 Flutter 實作。

Flutter 結構

Flutter Framework

他是純 Dart 實現的 SDK。

底下兩層 (Foundation和Animation、Painting、Gestures)

他對應 package 的是 dart:ui，他是Flutter 的底層 UI package，提供動畫、手勢及繪圖

Rendering

這層依賴於 Dart UI，他會先建構一個 UI Tree，當 UI Tree 有變化時，會計算出有變化的部分，然後更新 UI Tree，最終將 UI Tree 繪製到螢幕上Ｍ這個過程類似於 React 中的 Virtual DOM。
Rendering層可說是 Flutter UI 框架最核心的部分，他除了確定每個 UI 元素的位置、大小之外還要進行座標轉換、繪製（呼叫底層 dart:ui ）！

Widgets

是基礎組建 packages，Flutter還提供了 Material 和Cupertino 兩大視覺風格的組件 package。

Flutter Engine

這是由 C++ 實作的 SDK，包含 Skia 引擎、Dart、文字排版引擎等。在呼叫 dart:ui 時，最後都會呼叫到 Engine 層，然後實現真正的繪製邏輯。

Flutter 學習資源

1. 官網：Flutter 有非常豐富的教學資源。
2. Gallery：是Flutter 官方做的範例 App。
3. StackOverflow：有問題就在上面查詢吧！
4. Flutter中文网社区：https://flutterchina.club

《Flutter实战》电子书 - 第一章：起步 - 1.2 初识Flutter

Flutter技術簡介