什麼是Flutter？

Flutter簡介

Flutter是Google推出並開源的移動應用程序（App）開發框架，主打跨平臺、高保真、高性能。其採用Dart（官網、中文網）語言做爲開發語言，開發者能夠經過Dart語言開發Flutter App，一套代碼可同時運行在iOS和Android平臺上。Flutter提供了豐富的組件、接口，開發者能夠很快地爲Flutter添加原生擴展。

Flutter誕生過程：

• 2017 年 Google I/O 大會上，Google 首次推出了一款新的用於建立跨平臺、高性能的移動應用框架——Flutter。
• 2018年2月，Flutter發佈了第一個Beta版本，同年五月， 在2018年Google I/O 大會上，Flutter 更新到了 beta 3 版本。
• 2018年6月，Flutter發佈了首個預覽版本，這意味着 Flutter 進入了正式版（1.0）發佈前的最後階段。

跨平臺自繪引擎

Flutter與其餘用於構建App的大多數框架不一樣，由於Flutter既不使用WebView，也不使用平臺（Android、iOS等）的原生控件。相反，Flutter使用本身的高性能渲染引擎來繪製Widget。這樣不只能夠保證在Android和iOS平臺上UI的一致性，並且也能夠避免對原生控件依賴而帶來的限制及高昂的維護成本。

Flutter使用Skia做爲其2D渲染引擎，Skia是Google的一個2D圖形處理函數庫，包含字型、座標轉換以及點陣圖都有高效能且簡潔的表現，Skia是跨平臺的，並提供了很是友好的API，目前Google Chrome瀏覽器和Android均採用Skia做爲其繪圖引擎，值得一提的是，因爲Android系統已經內置了Skia，因此Flutter在打包APK（Android應用安裝包）時，不須要再將Skia打入APK中，但iOS系統並未內置Skia，因此構建iPA時，也必須將Skia一塊兒打包，這也是爲何Flutter APP的Android應用安裝包比iOS應用安裝包小的主要緣由。

高性能

Flutter採用GPU渲染技術，Flutter編寫的應用是能夠達到120fps（每秒傳輸幀數），這也就是說，它徹底能夠勝任遊戲的製做，而咱們常說的RN的性能只能達到60fps，這也算是Flutter的一個超高競爭力，官方宣稱Flutter甚至會超過原生性能。若是你想邁入移動遊戲領域，學習Flutter也是一個很是好的選擇。

Flutter高性能主要靠兩點來保證：

• 首先，Flutter App採用Dart語言開發，Dart在JIT（即時編譯）模式下，速度與JavaScript基本持平；並且Dart還支持AOT（提早編譯）模式，當以AOT模式運行時，JavaScript便遠遠追不上了。速度的提高對高幀率下的視圖數據計算頗有幫助。
• 其次，Flutter使用本身的渲染引擎來繪製UI，佈局數據等由Dart語言直接控制，因此在佈局過程當中不須要像RN那樣經過JavaScriptCore在JavaScript和原生之間進行通訊，這在一些滑動和拖動的場景下具備明顯優點，由於在滑動和拖動過程當中每每都會引發佈局發生變化，因此JavaScript須要和原生之間不停的同步佈局信息，這和在瀏覽器中要JavaScript頻繁操做DOM所帶來的問題是相同的，都會帶來比較可觀的性能開銷。

爲何Flutter採用Dart語言開發？

這是一個頗有意思，同時具備爭議的問題，在瞭解Flutter爲何選擇了Dart而不是JavaScript以前，咱們先來介紹兩個概念：JIT和AOT。

目前，程序主要有兩種運行方式：靜態編譯和動態解釋。

• 靜態編譯：靜態編譯的程序在執行前所有被翻譯爲機器碼，一般將這種類型稱爲AOT（Ahead of time）即「提早編譯」；
• 動態解釋：動態解釋的程序是在執行中一句一句邊翻譯邊運行的，一般將這種類型稱爲JIT（Just-in-time）即「即時編譯」。

AOT程序的典型表明是用C/C++開發的應用，它們必須在執行前編譯成機器碼，而JIT的表明則很是多，如JavaScript、Python等，事實上，全部腳本語言都支持JIT模式。但值得一提的是JIT和AOT指的是程序運行方式，它們和編程語言並不是強關聯，有些語言既能夠以JIT方式運行也能夠以AOT方式運行，如Java、Python，它們能夠在第一次執行時編譯成中間字節碼，而後在以後執行時能夠直接執行字節碼，也許有人會說，中間字節碼並不是機器碼，在程序執行時仍然須要動態將字節碼轉爲機器碼，是的，不過一般咱們區分是否爲AOT的標準就是看代碼在執行以前是否須要編譯，只要須要編譯，不管其編譯產物是字節碼仍是機器碼，都屬於AOT。在此，讀者沒必要糾結於概念，概念就是爲了傳達精神而發明的，只要讀者可以理解其原理便可，正所謂得其神忘其形。

如今咱們看看Flutter爲何選擇Dart語言？筆者根據官方解釋以及本身對Flutter的理解總結了如下幾條（因爲其它跨平臺框架都將JavaScript做爲其開發語言，因此主要將Dart和JavaScript作一個對比）：

1. 開發效率高

• 基於JIT的快速開發週期：Flutter在開發階段採用JIT模式，這樣就避免了每次改動都要進行編譯，極大的節省了開發時間；（Dart運行時支持）
• 基於AOT的發佈包：Flutter在發佈時能夠經過AOT生成高效的ARM代碼以保證應用性能，而JavaScript則不具備這個能力。（編譯器支持）

2. 高性能

   Flutter旨在提供流暢、高保真的UI體驗。爲了實現這一點，Flutter須要可以在每一個動畫幀中運行大量的代碼，這意味着須要一種既能提供高性能的語言，又不會出現丟幀的週期性暫停，而Dart支持AOT，在這一點上能夠作的比JavaScript更好。

3. 快速內存分配

   Flutter框架使用函數式流，這使得它在很大程度上依賴於底層的內存分配器。所以，擁有一個可以有效的處理瑣碎任務的內存分配器將顯得十分重要，若是Dart語言缺少此功能，Flutter將沒法有效地工做。固然Chrome V8的JavaScript引擎在內存分配上也已經作的很好了，事實上Dart開發團隊的不少成員都是來自Chrome團隊的，因此在內存分配上Dart並不能做爲超越JavaScript的優點，但對於Flutter來講，它須要這樣的特性，而Dart也正好知足而已。

4. 類型安全

   因爲Dart是類型安全的語言，支持靜態類型檢測，因此能夠在編譯前發現一些類型的錯誤，並排除潛在問題，這一點對於前端開發者來講可能會更具備吸引力。與之不一樣的，JavaScript是一個弱類型語言，也所以前端社區出現了不少給JavaScript代碼添加靜態類型檢測的擴展語言和工具，如：微軟的TypeScript以及Facebook的Flow。相比之下，Dart自己就支持靜態類型，就是它的一個重要優點。

5. Dart團隊的支持

   因爲有Dart團隊的積極投入，Flutter團隊能夠得到更多、更方便的支持，正如Flutter官網所訴：「咱們正與Dart社區進行密切合做，以改進Dart在Flutter中的使用。例如，當咱們最初使用Dart時，該語言並無提供生成原生二進制文件的工具鏈（工具鏈對於實現可預測的高性能具備很大的幫助），可是如今它實現了，由於Dart團隊專門爲Flutter構建了它。一樣，Dart VM以前已經針對吞吐量進行了優化，但團隊如今正在優化VM的延遲時間，這對於Flutter的工做負載更爲重要。」

Flutter框架結構

下面咱們將對Flutter的框架作一個總體介紹，旨在讓讀者心中有一個總體的印象，這對初學者來講很是重要。若是一會兒便深刻到Flutter中，就會像是一個在沙漠中沒有地圖的人，即便能夠找到一個綠洲，可是他也不會知道下一個綠洲在哪兒。所以，不管學什麼技術，都要先有一張清晰的「地圖」，而咱們的學習過程就是「按圖索驥」，這樣咱們纔不會陷於細節而「目無全牛」。接下來，咱們看一下Flutter官方提供的一張框架結構圖：

Flutter Framework

這是一個純Dart實現的SDK，它實現了一套基礎庫，自底向上，簡單介紹一下：

• 底下兩層（Foundation層和Animation、Painting、Gestures層）在Google的一些視頻中將這兩層合併爲一個Dart UI層，對應的是Flutter中的dart:ui包，它是Flutter引擎暴露的底層UI庫，提供動畫、手勢及繪製功能。
• Rendering層，這一層是一個抽象的佈局層，它依賴於Dart UI層，Rendering層會構建一個UI樹，當UI樹有變化時，會計算出有變化的部分，而後更新UI樹，最終將UI樹繪製到屏幕上，這個過程相似於React中的虛擬DOM。Rendering層能夠說是Flutter UI框架最核心的部分，它除了肯定每一個UI元素的位置、大小以外還要進行座標變換、繪製（調用底層dart:ui包）。
• Widgets層是Flutter提供的一套基礎組件庫，在基礎組件庫之上，Flutter還提供了Material和Cupertino兩種視覺風格的組件庫。而咱們Flutter開發的大多數場景，只是和Widgets層和Material、Cupertino層打交道。

Flutter Engine

這是一個純C++實現的SDK，其中包括Skia引擎、Dart運行時和文字排版引擎等。在代碼調用dart:ui庫時，調用最終會走到Engine層，而後實現真正的繪製邏輯。

總結

Flutter框架自己有着良好的分層設計，本章旨在讓讀者對Flutter總體框架有個大概的印象，相信到如今爲止，讀者已經對Flutter有一個初始印象，在咱們正式動手以前，咱們仍是須要多瞭解一下Flutter的開發語言Dart。

如何學習Flutter

資源

• 官網：閱讀Flutter官網的資源是快速入門的最佳方式，同時官網也是瞭解最新Flutter發展動態的地方，因爲目前Flutter仍然處於快速發展階段，因此建議讀者要時不時的去官網看看有沒有新的動態。
• 源碼及註釋：源碼和註釋應做爲學習Flutter的第一文檔，Flutter SDK的源碼是開源的，而且註釋很是詳細，也有不少示例，實際上，Flutter官方的SDK文檔就是經過註釋生成的。源碼結合註釋能夠幫你解決大多數問題。
• Github：若是遇到的問題在StackOverflow上也沒有找到答案，能夠去Github Flutter 項目下提issue。
• Gallery源碼：Gallery是Flutter官方示例APP，裏面有豐富的示例，讀者能夠在網上下載安裝。Gallery的源碼在Flutter源碼「examples」目錄下。

社區

• StackOverflow：若是你還沒聽過StackOverflow，那麼我如今就能夠告訴你，它是目前全球最大的程序員問答社區，也是如今活躍度最高的Flutter問答社區。StackOverflow社區除了世界各地的Flutter使用者會在上面交流以外，Flutter開發團隊的成員也常常會在上面回答問題。
• Flutter中文網社區：Flutter中文網是wendux（牛人）維護的Flutter中文網站，也是目前最大的Flutter中文資源社區，上面提供了Flutter官網的文檔翻譯、開源項目及案例，還有申請加入組織的入口哦！筆者的文章不少都是整理於此。
• 掘金：掘金的Flutter主頁目前收集了很多的專業性博客文章，讀者能夠自行瀏覽。