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

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

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

本概述分為多個(gè)部分：

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

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

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

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

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

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

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