一篇帶你了解跨平臺的 UI 工具包—Flutter
Flutter是Google開發的一套全新的跨平臺、開源UI框架，支持iOS、Android系統開發，并且是未來新操作系統Fuchsia的默認開發套件。自從2017年5月發布第一個版本以來，目前Flutter已經發布了近60個版本，并且在2018年5月發布了第一個“Ready for Production Apps”的Beta 3版本，6月20日發布了第一個“Release Preview”版本。
Flutter 是一個跨平臺的 UI 工具包，旨在允許代碼在 iOS 和 Android 等操作系統之間重用，同時還允許應用程序直接與底層平臺服務交互。目標是使開發人員能夠交付在不同平臺上感覺自然的高性能應用程序，在共享盡可能多的代碼的同時擁抱存在的差異。
在開發過程中，Flutter 應用程序在 VM 中運行，該 VM 提供有狀態的熱重新加載更改，而無需完全重新編譯。對于發布，Flutter 應用程序直接編譯為機器代碼，無論是 Intel x64 還是 ARM 指令，或者如果目標是 web，則編譯為 JavaScript。該框架是開源的，具有寬松的 BSD 許可證，并且擁有一個蓬勃發展的第三方包生態系統，可以補充核心庫功能。
本概述分為多個部分：
- 層模型：構建 Flutter 的部分。
- 響應式用戶界面：Flutter 用戶界面開發的核心概念。
- 小部件簡介：Flutter 用戶界面的基本構建塊。
- 渲染過程：Flutter 如何將 UI 代碼轉換為像素。
- 平臺嵌入器概述：讓移動和桌面操作系統執行 Flutter 應用程序的代碼。
- 將 Flutter 與其他代碼集成：有關 Flutter 應用可用的不同技術的信息。
- Support for the web：結語 Flutter 在瀏覽器環境下的特性。
在Flutter誕生之前，已經有許多跨平臺UI框架的方案，比如基于WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。
基于WebView的框架優點很明顯，它們幾乎可以完全繼承現代Web開發的所有成果(豐富得多的控件庫、滿足各種需求的頁面框架、完全的動態化、自動化測試工具等等)，當然也包括Web開發人員，不需要太多的學習和遷移成本就可以開發一個App。同時WebView框架也有一個致命(在對體驗&性能有較高要求的情況下)的缺點，那就是WebView的渲染效率和JavaScript執行性能太差。再加上Android各個系統版本和設備廠商的定制，很難保證所在所有設備上都能提供一致的體驗。
為了解決WebView性能差的問題，以React Native為代表的一類框架將最終渲染工作交還給了系統，雖然同樣使用類HTML+JS的UI構建邏輯，但是最終會生成對應的自定義原生控件，以充分利用原生控件相對于WebView的較高的繪制效率。與此同時這種策略也將框架本身和App開發者綁在了系統的控件系統上，不僅框架本身需要處理大量平臺相關的邏輯，隨著系統版本變化和API的變化，開發者可能也需要處理不同平臺的差異，甚至有些特性只能在部分平臺上實現，這樣框架的跨平臺特性就會大打折扣。
Flutter則開辟了一種全新的思路，從頭到尾重寫一套跨平臺的UI框架，包括UI控件、渲染邏輯甚至開發語言。渲染引擎依靠跨平臺的Skia圖形庫來實現，依賴系統的只有圖形繪制相關的接口，可以在最大程度上保證不同平臺、不同設備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執行效率也比JavaScript高得多。
Flutter同時支持Windows、Linux和macOS操作系統作為開發環境，并且在Android Studio和VS Code兩個IDE上都提供了全功能的支持。Flutter所使用的Dart語言同時支持AOT和JIT運行方式，JIT模式下還有一個備受歡迎的開發利器“熱刷新”(Hot Reload)，即在Android Studio中編輯Dart代碼后，只需要點擊保存或者“Hot Reload”按鈕，就可以立即更新到正在運行的設備上，不需要重新編譯App，甚至不需要重啟App，立即就可以看到更新后的樣式。
在Flutter中，所有功能都可以通過組合多個Widget來實現，包括對齊方式、按行排列、按列排列、網格排列甚至事件處理等等。Flutter控件主要分為兩大類，StatelessWidget和StatefulWidget，StatelessWidget用來展示靜態的文本或者圖片，如果控件需要根據外部數據或者用戶操作來改變的話，就需要使用StatefulWidget。State的概念也是來源于Facebook的流行Web框架React，React風格的框架中使用控件樹和各自的狀態來構建界面，當某個控件的狀態發生變化時由框架負責對比前后狀態差異并且采取最小代價來更新渲染結果。
