Flutter是什麼？

現在，主流的移動開發平台是 Android 和 iOS，每個平台上的開發技術不太一樣，針對每個平台開發應用需要特定的人員，但這樣一來開發效率會變得低下，因而需要進行跨平台開發。

行動端跨平台開發技術

跨平台技術從最開始的 Hybrid 混合開發技術，到 React Native 的橋接技術，再到 Flutter 的自建 UI，一直在演進。

Hybrid 開發主要依賴於 WebView，但 WebView 是一個重量級的控制元件，很容易產生記憶體問題，而且複雜的 UI 在 WebView 上顯示的效能不好。

React Native 技術拋開了 WebView，利用 JavaScript Core 來做橋接，將 JavaScript 呼叫轉為 Native 呼叫。React Native 最終會生成對應的自定義原生控制元件。這種策略將框架本身和 App 開發者綑綁在系統的控制元件上，不僅框架本身需要處理大量平台相關的邏輯，隨著系統版本變化和 API 的變化，開發者可能也需要處理不同平台間的差異，甚至有些特性只能在部分平台上實現，這使得跨平台特性大打折扣。

Flutter 是最新的跨平台開發技術，可以橫跨 Android、iOS、MacOS、Windows、Linux 等多個系統，還可以打包成 Web 程式執行在瀏覽器上。Flutter 採用了更為徹底的跨平台方案，即自己實現了一套 UI 框架，然後直接在 GPU 上渲染 UI 頁面。

筆者最早接觸的跨平台技術是 Adobe Air，寫一套 Action Script 程式碼可以執行在 PC、Android 及 iOS 三大平台上。

筆者與朋友開發視訊會議產品，需要最大化地減少前端的開發及維護工作量，所以，我們先後考察過 Cordova、React Native 及 Flutter 等技術。最終經過全面的對比分析，我們覺得 Flutter 方案更加先進，效率更高。

Flutter 是什麼？

Flutter 是谷歌的移動 UI 框架，可以快速在 iOS 和 Android 上構建高品質的原生使用者介面。Flutter 可以與現有的程式碼一起工作。

在全世界，Flutter 正在被越來越多的開發者和組織使用，並且 Flutter 是完全免費、開源的。

Flutter的特點如下所示：

1) 跨平台

現在 Flutter 至少可以跨 5 種平台，甚至支援嵌入式開發。我們常用的如 MacOS、Windows、Linux、Android、iOS，甚至可以在谷歌最新的作業系統 Fuchsia 上執行。

到目前為止，Flutter 算是支援平台最多的框架了，良好的跨平台性直接帶來的好處就是減少開發成本。

2) 絲滑般的體驗

使用 Flutter 內建的 Material Design 和 Cupertino 風格元件、豐富的 motion API、平滑而自然的滑動效果和平台感知，為使用者帶來全新體驗。

3) 響應式框架

使用 Flutter 的響應式框架和一系列基礎元件，可以輕鬆構建使用者介面。使用功能強大且靈活的 API（針對 2D、動畫、手勢、效果等）能解決艱難的 UI 挑戰。

4) 支援外掛

通過 Flutter 的外掛可以存取平台本地 API，如相機、藍牙、WiFi 等。可借助現有的 Java、Swift、Objective-C、C++ 程式碼實現對原生系統的呼叫。

5) 60fps超高效能

Flutter 採用 GPU 渲染技術，所以效能極高。用 Flutter 編寫的應用可以達到 60fps（每秒傳輸幀數），這意味著它完全可以勝任遊戲的製作。

官方宣稱用 Flutter 開發的應用的效能甚至會超過原生應用。

Flutter 的核心概念

Flutter 包括一個現代的響應式框架、一個 2D 渲染引擎、各種元件和開發工具。這些元件有助於快速地設計、構建、測試和偵錯應用程式。

Flutter 的核心概念有：元件、構建、狀態、框架等，下面分別介紹。

Flutter 中一切皆為元件

元件（Widget）是 Flutter 應用程式使用者介面的基本構建塊。不僅按鈕、輸入框、卡片、列表這些內容可作為 Widget，甚至佈局方式、動畫處理都可視為 Widget，所以 Flutter 具有一致的統一物件模型：Widget。

Widget可以定義為：

• 一個介面元件（如按鈕或輸入框）。
• 一個文字樣式（如字型或顏色）。
• 一種布局（如填充或捲動）。
• 一種動畫處理（如緩動）。
• 一種手勢處理（GestureDetector）。

Widget 具有豐富的屬性及方法，通過屬性可改變元件的狀態（顏色、大小等）及回撥方法的處理（單擊事件回撥、手勢事件回撥等），方法主要是提供一些元件的功能擴充套件。比如 TextBox 是一個矩形的文字元件，其屬性及方法如下：

• bottom：底部間距屬性。
• direction：文字排列方向屬性。
• left：左側間距屬性。
• right：右側間距屬性。
• top：上部間距屬性。
• toRect：匯出矩形方法。
• toString：轉換成字串方法。

Flutter 元件巢狀

複雜的功能介面通常都是由一個一個功能簡單的元件組裝完成的。有的元件負責佈局，有的負責定位，有的負責調整大小，有的負責漸變處理，等等。這種巢狀組合的方式帶來的最大好處就是解耦。

例如，介面中新增了一個居中元件 Center，居中元件裡巢狀了一個容器元件 Container，容器元件裡巢狀了一個文字元件 Text 和一個裝飾器 BoxDecoration。

演示程式碼如下所示：

return Center(
    // 新增容器
    child: Container(
        // 新增裝飾器
        decoration: BoxDecoration( ),
        child: Text(
            // 新增文字元件
        ),
    ),
),

大家如果是首次看到這段程式碼，會覺得巢狀層次太多、太複雜。其實不然，隨著對元件的深入了解及熟練使用，寫起來還是非常得心應手的。

最基礎的元件類是 Widget，其他所有的元件都是繼承 Widget 的，如下圖所示。緊接著下面有兩大類元件：有狀態元件及無狀態元件。有狀態元件是介面會發生變化的元件，如 Scrollable、Animatable 等，無狀態的元件即介面不發生變化的元件，如 Text、AssetImage 等。

---