Flutter是google使用Dart語言開發(fā)的移動應(yīng)用開發(fā)框架，使用一套Dart代碼就能構(gòu)建高性能、高保真的IOS和Android應(yīng)用程序，并且在排版、圖標(biāo)、滾動、點擊等方面實現(xiàn)零差異 、
Flutter移動應(yīng)用程序SDK是為開發(fā)人員提供一種創(chuàng)建快捷、美觀的應(yīng)用程序的新方式，從而擺脫過去那種千篇一律的App，嘗試過Flutter的人都會真的愛上它。與任何新系統(tǒng)一樣，用戶想知道Flutter有什么與眾不同之處，“Flutter有什么新的或者令人興奮的東西嗎？”，這是一個合理的問題，本文將從技術(shù)的角度回答Flutter有什么東西讓人興奮，而且給出它為什么讓人興奮的原因。
但首先，先講一小段歷史。
移動開發(fā)的簡史
移動開發(fā)是一個較新的領(lǐng)域，開發(fā)者們開始涉足移動開發(fā)時間尚不足十年，所以移動開發(fā)的工具仍然在發(fā)展當(dāng)中，這并不奇怪。
OEM SDKs
蘋果的iOS SDKs發(fā)布于2008年，谷歌的Android軟件開發(fā)工具包發(fā)布于2009年，這兩種工具包基于不同的編程語言，分別是Objective-C和JAVA。
通過這些SDK，你的應(yīng)用可以與系統(tǒng)通信，以創(chuàng)建UI組件或訪問系統(tǒng)相機。這些組件被渲染到手機屏幕，而相應(yīng)的事件則被傳回給組件。這個架構(gòu)足夠簡單，但你仍然不得不為每個平臺開發(fā)單獨的App，因為這些系統(tǒng)組件都是不一樣的，更不用提開發(fā)語言的不同了。
WebView
第一個跨平臺的框架基于JavaScript 和 WebView，例如 Titanium和一系列相關(guān)的框架：PhoneGap, Apache Cordova, Ionic等，在蘋果發(fā)布iOS之前，他們鼓勵第三方開發(fā)者為iphone構(gòu)建網(wǎng)頁應(yīng)用程序，因此使用Web技術(shù)構(gòu)建跨平臺應(yīng)用程序是順理成章的一步。
你的應(yīng)用程序可以創(chuàng)建html并將其顯示在平臺的WebViews上，請注意像JavaScript這樣的語言很難直接與本地代碼（例如服務(wù)）進行通信，因此他們會通過一個在JavaScript代碼和原生代碼的“橋梁”進行上下文切換，因為平臺服務(wù)通常不會經(jīng)常被調(diào)用，所以這并不會導(dǎo)致太大的性能問題。
響應(yīng)式視圖
像ReactJS或其他的響應(yīng)式編程框架已經(jīng)變得很流行了，主要是因為他們通過使用從響應(yīng)式編程中借用的編程模式來簡化Web視圖的創(chuàng)建過程。2015年， React Native將響應(yīng)式視圖的許多優(yōu)勢帶給了移動應(yīng)用程序。
React Native是非常受歡迎的（這是它應(yīng)得的），但是因為JavaScript訪問了原生UI組件，所以它也必須經(jīng)過這些“橋接器”，界面上的UI控件通常被頻繁地訪問（在動畫、轉(zhuǎn)化或者用戶用手指“滑動”屏幕上的某些東西時，每秒被訪問高達60次），因此這很可能會導(dǎo)致性能問題。
正如關(guān)于React Native的一篇文章所說：
這是理解React Native性能的其中一個關(guān)鍵，JS代碼和原生代碼本身都是很快的，瓶頸經(jīng)常發(fā)生在當(dāng)我們視圖從一邊轉(zhuǎn)向另一邊時。未來構(gòu)建高質(zhì)量的應(yīng)用程序時，我們必須將使用橋接的次數(shù)控制到最小。
和React Native一樣，F(xiàn)lutter也提供響應(yīng)式的視圖，F(xiàn)lutter采用不同的方法避免由JavaScript橋接器引起的性能問題，即用名為Dart的程序語言來編譯。Dart是用預(yù)編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，而不需要通過執(zhí)行上下文切換的JavaScript橋接器。編譯為原生代碼也可以加快應(yīng)用程序的啟動時間。
實際上，F(xiàn)lutter是唯一提供響應(yīng)式視圖而不需要JavaScript橋接器的移動SDK，這就足以讓Fluttter變得有趣而值得一試，但Flutter還有一些革命性的東西，即它是如何實現(xiàn)UI組件的？
組件（Widgets）
Widgets是影響和控制應(yīng)用程序的視圖和界面的元素，說這些組件是移動應(yīng)用中最重要的部分之一，這并不夸張，事實上，UI表現(xiàn)如何，可以成就或毀掉一款A(yù)pp。
Widgets的外觀和給人的感覺是至關(guān)重要的，Widgets需要看起來不錯，包 括各種屏幕的尺寸，也需要有自然的感覺。
Widgets必須快速執(zhí)行：創(chuàng)建或擴展UI控件（實例化他們的Widgets），將其放在屏幕上，渲染他們，或者（尤其是）將其動畫化。
對現(xiàn)代的應(yīng)用程序來說，Widgets應(yīng)該是可擴展和可定制的，開發(fā)人員希望能夠添加討人喜歡的新的UI組件，并自定義所有Widgets以匹配各種品牌的應(yīng)有程序。
Flutter的系統(tǒng)架構(gòu)包含大量賞心悅目、快速、可定制、可擴展的Widgets。沒錯，F(xiàn)lutter不需要使用系統(tǒng)UI組件（或DOM WebViews），它自帶了Widgets。
Flutter是什么？
Flutter移動應(yīng)用程序SDK是為開發(fā)人員提供一種創(chuàng)建快捷、美觀的應(yīng)用程序的新方式，從而擺脫過去那種千篇一律的app，嘗試過Flutter的人都會真的愛上它；例如，這位開發(fā)者，這位，或者這位，或者由第三方編輯的一系列文章和視頻。
與任何新系統(tǒng)一樣，用戶想知道Flutter有什么與眾不同之處，“Flutter有什么新的或者令人興奮的東西嗎？”，這是一個合理的問題，本文將從技術(shù)的角度回答Flutter有什么東西讓人興奮，而且給出它為什么讓人興奮的原因。
但首先，先講一小段歷史。
移動開發(fā)的簡史
移動開發(fā)是一個較新的領(lǐng)域，開發(fā)者們開始涉足移動開發(fā)時間尚不足十年，所以移動開發(fā)的工具仍然在發(fā)展當(dāng)中，這并不奇怪。
OEM SDKs
蘋果的iOS SDKs發(fā)布于2008年，谷歌的Android軟件開發(fā)工具包發(fā)布于2009年，這兩種工具包基于不同的編程語言，分別是Objective-C和Java。
通過這些SDK，你的應(yīng)用可以與系統(tǒng)通信，以創(chuàng)建UI組件或訪問系統(tǒng)相機。這些組件被渲染到手機屏幕，而相應(yīng)的事件則被傳回給組件。這個架構(gòu)足夠簡單，但你仍然不得不為每個平臺開發(fā)單獨的App，因為這些系統(tǒng)組件都是不一樣的，更不用提開發(fā)語言的不同了。
WebView
第一個跨平臺的框架基于JavaScript 和 WebView，例如 Titanium和一系列相關(guān)的框架：PhoneGap, Apache Cordova, Ionic等，在蘋果發(fā)布iOS之前，他們鼓勵第三方開發(fā)者為iPhone構(gòu)建網(wǎng)頁應(yīng)用程序，因此使用Web技術(shù)構(gòu)建跨平臺應(yīng)用程序是順理成章的一步。
你的應(yīng)用程序可以創(chuàng)建HTML并將其顯示在平臺的WebViews上，請注意像JavaScript這樣的語言很難直接與本地代碼（例如服務(wù)）進行通信，因此他們會通過一個在JavaScript代碼和原生代碼的“橋梁”進行上下文切換，因為平臺服務(wù)通常不會經(jīng)常被調(diào)用，所以這并不會導(dǎo)致太大的性能問題。
響應(yīng)式視圖
像ReactJS或其他的響應(yīng)式編程框架已經(jīng)變得很流行了，主要是因為他們通過使用從響應(yīng)式編程中借用的編程模式來簡化Web視圖的創(chuàng)建過程。2015年， React Native將響應(yīng)式視圖的許多優(yōu)勢帶給了移動應(yīng)用程序
React Native是非常受歡迎的（這是它應(yīng)得的），但是因為JavaScript訪問了原生UI組件，所以它也必須經(jīng)過這些“橋接器”，界面上的UI控件通常被頻繁地訪問（在動畫、轉(zhuǎn)化或者用戶用手指“滑動”屏幕上的某些東西時，每秒被訪問高達60次），因此這很可能會導(dǎo)致性能問題。
正如關(guān)于React Native的一篇文章所說：
這是理解React Native性能的其中一個關(guān)鍵，JS代碼和原生代碼本身都是很快的，瓶頸經(jīng)常發(fā)生在當(dāng)我們視圖從一邊轉(zhuǎn)向另一邊時。未來構(gòu)建高質(zhì)量的應(yīng)用程序時，我們必須將使用橋接的次數(shù)控制到最小。
Flutter
和React Native一樣，F(xiàn)lutter也提供響應(yīng)式的視圖，F(xiàn)lutter采用不同的方法避免由JavaScript橋接器引起的性能問題，即用名為Dart的程序語言來編譯。Dart是用預(yù)編譯的方式編譯多個平臺的原生代碼，這允許Flutter直接與平臺通信，而不需要通過執(zhí)行上下文切換的JavaScript橋接器。編譯為原生代碼也可以加快應(yīng)用程序的啟動時間。
實際上，F(xiàn)lutter是唯一提供響應(yīng)式視圖而不需要JavaScript橋接器的移動SDK，這就足以讓Fluttter變得有趣而值得一試，但Flutter還有一些革命性的東西，即它是如何實現(xiàn)UI組件的？
組件（Widgets）
Widgets是影響和控制應(yīng)用程序的視圖和界面的元素，說這些組件是移動應(yīng)用中最重要的部分之一，這并不夸張，事實上，UI表現(xiàn)如何，可以成就或毀掉一款A(yù)pp。
Widgets的外觀和給人的感覺是至關(guān)重要的，Widgets需要看起來不錯，包 括各種屏幕的尺寸，也需要有自然的感覺。
Widgets必須快速執(zhí)行：創(chuàng)建或擴展UI控件（實例化他們的Widgets），將其放在屏幕上，渲染他們，或者（尤其是）將其動畫化。
對現(xiàn)代的應(yīng)用程序來說，Widgets應(yīng)該是可擴展和可定制的，開發(fā)人員希望能夠添加討人喜歡的新的UI組件，并自定義所有Widgets以匹配各種品牌的應(yīng)有程序。
Flutter的系統(tǒng)架構(gòu)包含大量賞心悅目、快速、可定制、可擴展的Widgets。沒錯，F(xiàn)lutter不需要使用系統(tǒng)UI組件（或DOM WebViews），它自帶了Widgets。
Flutter將UI組件和渲染器從平臺移動到應(yīng)用程序中，這使得它們可以自定義和可擴展。Flutter唯一要求系統(tǒng)提供的是canvas，以便定制的UI組件可以出現(xiàn)在設(shè)備的屏幕上，以及訪問事件（觸摸，定時器等）和服務(wù)（位置、相機等）。
Dart程序（綠色）和執(zhí)行數(shù)據(jù)編碼和解碼的原生平臺代碼（藍色，適用于iOS或Android）之間仍然有一個接口，但這能比JavaScript橋接器快幾個數(shù)量級。
將UI組件和渲染器移動到應(yīng)用程序中確實會影響應(yīng)用程序的大小。Android上的Flutter應(yīng)用程序的的初始大小約為6.7M，這與類似的工具構(gòu)建的最小應(yīng)用程序的大小相似，您可以決定Flutter的優(yōu)勢是否值得權(quán)衡，因此本文的余下部分將討論這些優(yōu)勢。
布局
Flutter最大的改進之一就是它的布局，布局是基于一組規(guī)則（也稱約束）來決定UI組件的大小和位置。
傳統(tǒng)上，布局使用大量可以應(yīng)用于任何UI組件的規(guī)則。這些規(guī)則實現(xiàn)多種布局方法，我們就以眾所周知的css布局為例（盡管Android和iOS中的布局基本相似）。CSS具有適用于HTML元素（UI組件）的屬性（規(guī)則）， CSS3定義了375個屬性。
CSS包含大量的布局模型，如多種箱模型、浮動元素、表、多列文本、分頁媒介等。還有像flexbox 和 grid的布局模型在之后也被添加進去，因為開發(fā)人員和設(shè)計人員需要對布局進行更多地控制，而不得不使用表格和透明圖像來獲取他們想要的布局。在傳統(tǒng)布局中，開發(fā)人員無法添加新的布局模型，因此必須將flexbox 和 grid添加到CSS中并在所有瀏覽器上實現(xiàn)。
傳統(tǒng)布局的另一個問題是規(guī)則可以相互影響甚至發(fā)生沖突，通常有幾十種規(guī)則元素的規(guī)則應(yīng)用于他們，這使得布局變慢。更糟糕的是，布局性能通常為指數(shù)性下降，因此，隨著元件數(shù)量的增加，布局變慢得更快。
Flutter最開始是Google Chrome瀏覽器小組成員進行的實驗項目，我們想看看如果我們忽略了傳統(tǒng)的布局模式，是否可以構(gòu)建更快的渲染器。幾周后，我們在性能上取得了顯著增長，我們發(fā)現(xiàn)：
大多數(shù)的布局是相對簡單的，例如：滾動頁面上的文本，其大小和位置只取決于顯示大小的固定矩形，還有一些表格，浮動元素等。
大部分布局只作用于UI組件樹的一部分，并且這子樹通常使用一個布局模型，因此這些UI組件只需要少量的規(guī)則。
我們意識到如果完全改變以前的布局模式，布局就可以大大被簡化：
每個UI組件都將指定自己簡單的布局模型，而不是擁有可以應(yīng)用于任何UI組件的一整套布局規(guī)則。
因為每個UI組件都有一個更小的一套布局需要考慮，所以布局可以大量優(yōu)化。
為了進一步簡化布局，我們幾乎將所有內(nèi)容都轉(zhuǎn)換為UI組件。
這里是用Flutter代碼來創(chuàng)建的一個帶有布局的簡單UI組件。
new Center (
child: new Column(
children:[
new Text ('Hello, World!')),
new Icon (Icons.star, color: Colors.green)
]
)
這段代碼在語義上足夠清晰。你可以輕松地想象它將會生成什么。運行這段代碼的顯示結(jié)果如下：
Hello, World!
在這段代碼中，所有的組成部分都是一個UI組件，包括布局。 Center UI組件將其子組件集中在其母組件內(nèi)（如屏幕）。ColumnUI組件垂直排列其子組件（UI組件列表）。該列表包含一個Text和一個Icon控件（具有一個顏色屬性）。
在Flutter中，居中顯示和padding都是widgets，主題是適用于它們子組件的UI控件，甚至應(yīng)用程序和導(dǎo)航也是widgets。
Flutter包括很多用于布局的widgets，不僅僅含有列，還包括行、網(wǎng)格、列表等。 此外，F(xiàn)lutter還有一個獨特的布局模型，我們稱之為用于滾動的“長條布局模型 (sliver layout model)”。Flutter中的布局非常快，可用于滾動。試想一下，滾動必須如此快速平滑，以至于讓用戶感覺當(dāng)他們在物理屏幕上拖動時，屏幕圖像就像和他們的手指相連一樣。
通過使用布局進行滾動，F(xiàn)lutter可以實現(xiàn)高級滾動，如下所示。請注意，這些是GIF動畫，真正的Flutter應(yīng)用程序更加平滑。
在大多數(shù)情況下，F(xiàn)lutter僅需一次傳遞即可完成布局，這意味著布局所花的時間是線性增長的，所以它可以處理大量的widgets。Flutter也可以利用緩存或其他功能來避免重復(fù)的布局。
定制設(shè)計
因為UI組件現(xiàn)在是應(yīng)用程序的一部分，你可以添加新的UI組件，并且可以自定義現(xiàn)有的UI組件，以使其具有不同的外觀或感覺，或匹配公司的品牌，移動設(shè)計的趨勢正在與幾年前普遍使用的千篇一律的應(yīng)用程序背離，開始走向讓用戶愉悅的定制設(shè)計。
Flutter配有豐富的可定制的Android、iOS和Material Design組件（實際上，我們已經(jīng)被告知Flutter是Material Design中具有最高保真度之一的實現(xiàn)），我們使用Flutter的可定制特點來構(gòu)建這些組件庫，以匹配多個平臺上的原生組件的外觀和感覺。程序開發(fā)人員可以使用相似的可定制性功能進一步調(diào)整小組件以滿足他們的需求。
更多關(guān)于響應(yīng)式視圖
現(xiàn)有的響應(yīng)式web視圖庫都引入了虛擬DOM，DOM代表HTML的文檔對象模型。JavaScript用DOM提供的API來操縱表現(xiàn)為一個元素樹的HTML文檔。虛擬DOM是使用編程語言中的對象（在這種情況下為JavaScript）創(chuàng)建的DOM的抽象版本。
在響應(yīng)式Web視圖（由 ReactJS和其他系統(tǒng)實現(xiàn)）中，虛擬DOM是不可變的，每次更改，所有的東西都得重建。系統(tǒng)將虛擬DOM與真正的DOM進行比較，生成一組最小的更改，然后執(zhí)行這些更改，以更新真正的DOM。最后，平臺重新繪制真實的DOM到畫布中。
這聽起來增加了很多額外的工作，但它是值得的，因為操縱HTML DOM是非常耗費系統(tǒng)資源的。
React Native 也做類似的工作，但是是在移動應(yīng)用程序當(dāng)中進行的。它會操控移動平臺上的原生組件而不是DOM。它構(gòu)建一個UI組件的虛擬樹，與原生組件進行比較，并只更新已更改的部件。
請記住，React Native必須通過橋接器與原生部件進行通信，因此，UI組件的虛擬樹可以幫助保持傳遞橋的最小值，同時還允許使用原生部件。最后，一旦更新了本機部件，平臺就會將它們渲染到畫布上。
React Native是移動開發(fā)的一大進步，并且是Flutter的靈感來源，但Flutter更進一步。
回想一下，在Flutter中，UI組件和渲染器已經(jīng)從平臺中集成到用戶的應(yīng)用程序中。沒有系統(tǒng)UI組件可以操作，所以原來虛擬控件樹的地方現(xiàn)在是真實的控件樹。Flutter渲染UI控件樹并將其繪制到平臺畫布上。這很好，既簡單又快。 此外，動畫發(fā)生在用戶空間中，因此應(yīng)用程序（因此開發(fā)人員）可以對其進行更多的控制。
Flutter渲染器本身很有趣：它使用幾個內(nèi)部樹結(jié)構(gòu)來渲染只需要在屏幕上更新的UI組件。例如，渲染器使用“ 使用合成的結(jié)構(gòu)重繪”(這意味著比使用屏幕上的矩形區(qū)域更有效）。不變的UI控件，即使是那些已經(jīng)移動的UI控件，僅需在內(nèi)存中做極其細微的改動，速度當(dāng)然超級快。這就是為什么Flutter的滾動性能如此之高，即使在很復(fù)雜的滾動場景中。
要進一步了解Flutter渲染器，我推薦這個視頻。你也可以看看代碼，因為Flutter是開源的。當(dāng)然，您可以自定義或甚至替換整個堆棧，包括渲染器，合成器，動畫，手勢識別器，當(dāng)然還有widgets。
Dart編程語言
因為Flutter 像使用響應(yīng)式視圖的其他系統(tǒng)一樣，刷新每個新框架的視圖樹，它會創(chuàng)建許多只能在一幀（六十分之一秒）內(nèi)存在的對象。幸運的是，Dart使用“generational garbage collection ”對于這樣的系統(tǒng)來說是非常有效的，因為對象（特別是壽命短的）消耗資源相對較少。此外，可以使用單個pointer bump來完成對象的分配。這是一個快速且不需要鎖定的pointer bump。這有助于避免UI 卡頓。
Dart還有一個“tree shaking ”編譯器，它只包含你在應(yīng)用程序中需要的代碼。 即使您只需要一個或兩個，您也可以隨意使用大型的UI控件庫。
熱重載
Flutter最受歡迎的功能之一是其快速，保留程序狀態(tài)的熱重載 （hot reload）。 您可以在Flutter應(yīng)用程序運行時對其進行更改，重新加載應(yīng)用程序的代碼，將其從之前的操作位置繼續(xù)下去。一次熱重載通常用不到一秒鐘。 如果您的應(yīng)用遇到錯誤，您通常可以修復(fù)錯誤，然后繼續(xù)，就像錯誤從未發(fā)生過。 即使你必須完全重新加載，它也是很快速的。
開發(fā)人員告訴我們，這可以讓他們“繪制”他們的應(yīng)用程序，一次更改，然后幾乎立即可以看到結(jié)果，而無需重新啟動應(yīng)用程序。
兼容性
因為UI組件（和這些UI組件的渲染器）是您的應(yīng)用程序的一部分，而不是平臺的一部分，不需要“兼容庫 ”。 您的應(yīng)用程序不僅可以正常工作，而且在最近的操作系統(tǒng)版本Jelly Bean以后的安卓系統(tǒng)和 8.0以后的iOS系統(tǒng)上也是一樣的 。 這顯著降低了在舊版本操作系統(tǒng)上測試應(yīng)用程序的需求。 此外，你的App有很大可能與未來的操作系統(tǒng)版本兼容。
我們曾被問到一個潛在的問題。由于Flutter不使用原生UI組件，因此，當(dāng)新的iOS或Android版本出現(xiàn)時，F(xiàn)lutter UI組件是否需要更新才能支持新的部件，或更改現(xiàn)有部件的外觀或行為嗎？
首先，Google是Flutter的內(nèi)部的一個大用戶，所以我們有很大的動機來更新UI組件，使其保持最新狀態(tài)并盡可能接近當(dāng)前的原生UI組件。
如果有一段時間我們在更新一個UI組件時太慢，Google并不是Flutter唯一一個保持UI組件最新的用戶。Flutter的UI組件是可擴展和可定制的，任何人都可以更新它們，包括你自己， 甚至不需要提交一個請求。 你永遠不必等待Flutter自己更新。
只有當(dāng)您想要在應(yīng)用中反映出新的更改時，上述要點才適用。 如果您不想要更改影響您的應(yīng)用程序的外觀或工作方式，那么就沒有必要使用上面所說的。 UI組件是您的應(yīng)用程序的一部分，所以UI永遠不會在你不知情的情況下擅自改變，并使您的應(yīng)用程序看起來不好（或更糟的是，破壞您的應(yīng)用程序）。
還有一個額外的好處，您可以編寫您的應(yīng)用程序，以便即使在較舊的操作系統(tǒng)版本上也能使用新的UI組件.
其他優(yōu)勢
Flutter的簡單性使其運行很快，但它的可定制性和可擴展性，保持簡單的同時擁有強大功能。
Dart擁有一個軟件包倉庫。您可以用這些軟件包擴展應(yīng)用程序的功能。 例如，有許多軟件包可以輕松訪問Firebase，以便您可以構(gòu)建“無服務(wù)器”應(yīng)用程序。 外部貢獻者創(chuàng)建了一個可讓您訪問 Redux data store的軟件包。 還有一些稱為“plugins ”的軟件包，可以以獨立于操作系統(tǒng)的方式輕松訪問平臺服務(wù)和硬件，例如加速度計或相機。
當(dāng)然，F(xiàn)lutter也是一個開放源碼的項目 ，加上Flutter渲染堆棧是應(yīng)用程序的一部分，這意味著可以自定義幾乎任何想要的應(yīng)用程序。 該圖中綠色的部分都可以定制：
那么，“Flutter有什么新鮮又令人興奮的”呢？
如果有人問你Flutter，現(xiàn)在你知道如何回答他們了：
響應(yīng)式視圖的優(yōu)點，不需要JavaScript的橋接器
快速，流暢，可預(yù)測; 代碼將AOT編譯為本機（ARM）代碼
開發(fā)人員完全控制UI組件和布局
配有美觀，可定制的UI組件
強大的開發(fā)者工具，驚人的熱重新加載
性能更好，兼容性更好，開發(fā)起來更有樂趣
你注意到我把什么移出這個名單嗎？ 這是通常人們在談?wù)揊lutter時提到的第一件事，但對我來說，這是Flutter中最不重要的事情之一。
這就是，F(xiàn)lutter可以從單個代碼庫為多個平臺構(gòu)建漂亮而快速的應(yīng)用程序。 當(dāng)然這應(yīng)該列出來的！ 它的可定制性和可擴展性可以輕松將Flutter定位到多個平臺，而不會犧牲性能或功耗。
實現(xiàn)跨平臺
Flutter不是黑科技，應(yīng)用程序的代碼總是以一種非常合理，可以解釋的方式的運行著，只是需要去了解而已。Flutter能夠在iOS和Android上運行起來，依靠的是一個叫Flutter Engine的虛擬機，F(xiàn)lutter Engine是Flutter應(yīng)用程序的運行環(huán)境，開發(fā)人員可以通過Flutter框架和API在內(nèi)部進行交互。
Flutter Engine使用C/C++編寫，具有低延遲輸入和高幀速率的特點。關(guān)注AR/VR的人應(yīng)該都知道，AR/VR對延遲和幀速率的要求比傳統(tǒng)游戲要高得多，因為它們要求在用戶在移動時保持真實世界的穩(wěn)定性。因此筆者認為Flutter在未來的應(yīng)用與發(fā)展中會占有一席之地。
接下來以Android平臺為例，簡單的介紹一下Flutter的原理，有Android開發(fā)經(jīng)驗的人都知道，Android應(yīng)用程序是運行在Dalvik虛擬機里面的，并且每一個應(yīng)用程序?qū)?yīng)有一個單獨的Dalvik虛擬機實例，但是Flutter應(yīng)用程序不使用Dalvik虛擬機。
以一個Flutter項目為例，當(dāng)項目編譯成Android后，生成的安裝包大約23M。常規(guī)的Android應(yīng)用程序安裝包大多都能控制在10M以內(nèi)，為什么Flutter項目編譯的Android安裝包要23M呢？通過使用Android Studio打開該安裝包查看，上面的圖片是Android Studio顯示的結(jié)果。
通過觀察安裝包的內(nèi)容，可以發(fā)現(xiàn)lib目錄的大小約為48M，所以安裝包龐大的主因就在lib目錄。lib目錄下包含x86_64、x86和armeabi-v7a三種CPU類型的指令集，由此可見，F(xiàn)lutter編譯的Android應(yīng)用程序自帶獨立的虛擬機，也就是上面提到的Flutter Engine。
Flutter編譯的iOS應(yīng)用程序采取的方案是，使用iOS運行時(Runtime)實現(xiàn)跨平臺，iOS運行時(Runtime)是一個用匯編寫的一段程序，可以執(zhí)行C/C++編譯的二進制。iOS原生開發(fā)的Objective-C語言也是通過iOS運行時(Runtime)執(zhí)行C/C++的二進制文件，所以Flutter編譯的iOS應(yīng)用能和原生應(yīng)用不相上下。
2017年的Google發(fā)布會上，Google簡單介紹了正在研發(fā)中的操作系統(tǒng)Fuchsia，另有消息稱，該系統(tǒng)的UI用戶界面層使用的是Dart語言開發(fā)的Flutter框架，筆者相信該消息是真實的，因為在開發(fā)Flutter項目的過程中，使用獲取當(dāng)前平臺類型方法時，可選項目中除了iOS和Android，還包含F(xiàn)uchsia，如下圖所示。
框架結(jié)構(gòu)
下面的圖片是Flutter框架結(jié)構(gòu)圖，對大部分開發(fā)者而言，最常用的是Widgets層，屏幕上可見與不可見的元素都由Widgets層實現(xiàn)，這些元素被稱為Widget。在Widgets層在上層，有兩個現(xiàn)成的Widget庫，Material庫即Material Design的Widget庫，Material Design是Google I/O 2014發(fā)布的設(shè)計語言，目前成為統(tǒng)一Android Mobile、Android Table、Desktop Chrome等平臺的設(shè)計語言規(guī)范。Cupertino庫則是一個模仿iOS設(shè)計風(fēng)格的Widget庫。
Flutter框架結(jié)構(gòu)圖的底層是Flutter Engine虛擬機，在這一層次中需要了解一下的是Skia，Skia是Google研發(fā)的包括圖形、文本、圖像、動畫等多方面的圖形引擎，不僅用于Google Chrome瀏覽器，Android系統(tǒng)也采用Skia作為繪圖處理引擎。
上面的圖片展示了Flutter的繪圖原理，F(xiàn)lutter框架直接使用Skia引擎來渲染，因此能夠控制渲染幀數(shù)，從而實現(xiàn)高幀速率。
