Flutter是Google開發(fā)的一套全新的跨平臺、開源UI框架，支持iOS、Android系統(tǒng)開發(fā)，并且是未來新操作系統(tǒng)Fuchsia的默認開發(fā)套件。自從2017年5月發(fā)布第一個版本以來，目前Flutter已經(jīng)發(fā)布了近60個版本，并且在2018年5月發(fā)布了第一個“Ready for Production Apps”的Beta 3版本，6月20日發(fā)布了第一個“Release Preview”版本。

Flutter 是一個跨平臺的 UI 工具包，旨在允許代碼在 iOS 和 Android 等操作系統(tǒng)之間重用，同時還允許應(yīng)用程序直接與底層平臺服務(wù)交互。目標是使開發(fā)人員能夠交付在不同平臺上感覺自然的高性能應(yīng)用程序，在共享盡可能多的代碼的同時擁抱存在的差異。

在開發(fā)過程中，F(xiàn)lutter 應(yīng)用程序在 VM 中運行，該 VM 提供有狀態(tài)的熱重新加載更改，而無需完全重新編譯。對于發(fā)布，F(xiàn)lutter 應(yīng)用程序直接編譯為機器代碼，無論是 Intel x64 還是 ARM 指令，或者如果目標是 web，則編譯為 JavaScript。該框架是開源的，具有寬松的 BSD 許可證，并且擁有一個蓬勃發(fā)展的第三方包生態(tài)系統(tǒng)，可以補充核心庫功能。

本概述分為多個部分：

• 層模型：構(gòu)建 Flutter 的部分。
• 響應(yīng)式用戶界面：Flutter 用戶界面開發(fā)的核心概念。
• 小部件簡介：Flutter 用戶界面的基本構(gòu)建塊。
• 渲染過程：Flutter 如何將 UI 代碼轉(zhuǎn)換為像素。
• 平臺嵌入器概述：讓移動和桌面操作系統(tǒng)執(zhí)行 Flutter 應(yīng)用程序的代碼。
• 將 Flutter 與其他代碼集成：有關(guān) Flutter 應(yīng)用可用的不同技術(shù)的信息。
• Support for the web：結(jié)語 Flutter 在瀏覽器環(huán)境下的特性。

在Flutter誕生之前，已經(jīng)有許多跨平臺UI框架的方案，比如基于WebView的Cordova、AppCan等，還有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

基于WebView的框架優(yōu)點很明顯，它們幾乎可以完全繼承現(xiàn)代Web開發(fā)的所有成果(豐富得多的控件庫、滿足各種需求的頁面框架、完全的動態(tài)化、自動化測試工具等等)，當然也包括Web開發(fā)人員，不需要太多的學習和遷移成本就可以開發(fā)一個App。同時WebView框架也有一個致命(在對體驗&性能有較高要求的情況下)的缺點，那就是WebView的渲染效率和JavaScript執(zhí)行性能太差。再加上Android各個系統(tǒng)版本和設(shè)備廠商的定制，很難保證所在所有設(shè)備上都能提供一致的體驗。

為了解決WebView性能差的問題，以React Native為代表的一類框架將最終渲染工作交還給了系統(tǒng)，雖然同樣使用類HTML+JS的UI構(gòu)建邏輯，但是最終會生成對應(yīng)的自定義原生控件，以充分利用原生控件相對于WebView的較高的繪制效率。與此同時這種策略也將框架本身和App開發(fā)者綁在了系統(tǒng)的控件系統(tǒng)上，不僅框架本身需要處理大量平臺相關(guān)的邏輯，隨著系統(tǒng)版本變化和API的變化，開發(fā)者可能也需要處理不同平臺的差異，甚至有些特性只能在部分平臺上實現(xiàn)，這樣框架的跨平臺特性就會大打折扣。

Flutter則開辟了一種全新的思路，從頭到尾重寫一套跨平臺的UI框架，包括UI控件、渲染邏輯甚至開發(fā)語言。渲染引擎依靠跨平臺的Skia圖形庫來實現(xiàn)，依賴系統(tǒng)的只有圖形繪制相關(guān)的接口，可以在最大程度上保證不同平臺、不同設(shè)備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執(zhí)行效率也比JavaScript高得多。

Flutter同時支持Windows、Linux和macOS操作系統(tǒng)作為開發(fā)環(huán)境，并且在Android Studio和VS Code兩個IDE上都提供了全功能的支持。Flutter所使用的Dart語言同時支持AOT和JIT運行方式，JIT模式下還有一個備受歡迎的開發(fā)利器“熱刷新”(Hot Reload)，即在Android Studio中編輯Dart代碼后，只需要點擊保存或者“Hot Reload”按鈕，就可以立即更新到正在運行的設(shè)備上，不需要重新編譯App，甚至不需要重啟App，立即就可以看到更新后的樣式。

在Flutter中，所有功能都可以通過組合多個Widget來實現(xiàn)，包括對齊方式、按行排列、按列排列、網(wǎng)格排列甚至事件處理等等。Flutter控件主要分為兩大類，StatelessWidget和StatefulWidget，StatelessWidget用來展示靜態(tài)的文本或者圖片，如果控件需要根據(jù)外部數(shù)據(jù)或者用戶操作來改變的話，就需要使用StatefulWidget。State的概念也是來源于Facebook的流行Web框架React，React風格的框架中使用控件樹和各自的狀態(tài)來構(gòu)建界面，當某個控件的狀態(tài)發(fā)生變化時由框架負責對比前后狀態(tài)差異并且采取最小代價來更新渲染結(jié)果。