點擊右上方紅色按鈕關注“web秀”，讓你真正秀起來
Flutter是什麼
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。
Flutter是什麼
Flutter歷史
說到Flutter，可能很多小夥伴都會以為它是新興的、移動端、動態化、跨平臺、開發框架，其實早在2014年10月，它就已經誕生。
從去年開始Flutter的熱度在不斷地上升，那麼它對很多小夥伴造成了一個誤區：認為Flutter是最近新興的一個開發框架。說Flutter是最流行的框架呢，是沒有任何問題的，但它並不是一個最近才出現的開發框架。為什麼這麼說呢？
Flutter歷史
2014.10 - Flutter的前身Sky在GitHub上開源
2015.10 - 經過一年的開源，Sky正式改名為Flutter
2017.5 - Google I/O正式向外界公佈了Flutter，這個時候Flutter才正式進去大家的視野
2018.6 - 距5月Google I/O 1個月的時間，Flutter1.0預覽版
2018.12 - Flutter1.0發佈，它的發佈將大家對Flutter的學習和研究推到了一個新的起點
2019.2 - Flutter1.2發佈主要增加對web的支持
由此可以看出：Flutter正在逐漸的走向成熟和壯大，它的生態圈也在不斷的發展，所以現在學習Flutter的時機是非常的好。
Flutter框架原理
Flutter實現跨平臺採用了更為徹底的方案。它既沒有采用WebView也沒有采用JavaScript，而是自己實現了一臺UI框架，然後直接系統更底層渲染系統上畫UI。所以它採用的開發語言不是JS，而Dart（Dart是面向對象的、類定義的、單繼承的語言。它的語法類似C語言，可以轉譯為JavaScript，支持接口(interfaces)、混入(mixins)、抽象類(abstract classes)、具體化泛型(reified generics)、可選類型(optional typing)和sound type syste）。據稱Dart語言可以編譯成原生代碼，直接跟原生通信。
Flutter框架原理
Flutter將UI組件和渲染器從平臺移動到應用程序中，這使得它們可以自定義和可擴展。Flutter唯一要求系統提供的是canvas，以便定製的UI組件可以出現在設備的屏幕上，以及訪問事件（觸摸，定時器等）和服務（位置、相機等）。這是Flutter可以做到跨平臺而且高效的關鍵。另外Flutter學習了RN的UI編程方式，引入了狀態機，更新UI時只更新最小改變區域。
系統的UI框架可以取代，但是系統提供的一些服務是無法取代的。Flutter在跟系統service通信方式，採用的是一種類似插件式的方式，或者有點像遠程過程調用RPC方式。這種方式據說也要比RN的橋接方式高效。
Flutter為什麼要採用Dart語言了？
Flutter為什麼要採用Dart語言了？
Dart能成為Flutter不可或缺的一部分，根本原因還是因為其具有以下特性：
1）Dart是AOT（Ahead Of Time）編譯的，編譯成快速、可預測的本地代碼，使Flutter幾乎都可以使用Dart編寫。這不僅使Flutter變得更快，而且幾乎所有的東西（包括所有的小部件）都可以定製；
2）Dart也可以JIT（Just In Time）編譯，開發週期異常快，工作流顛覆常規（包括Flutter流行的亞秒級有狀態熱重載）；
3）Dart可以更輕鬆地創建以60fps運行的流暢動畫和轉場。Dart可以在沒有鎖的情況下進行對象分配和垃圾回收。就像JavaScript一樣，Dart避免了搶佔式調度和共享內存（因而也不需要鎖）。由於Flutter應用程序被編譯為本地代碼，因此它們不需要在領域之間建立緩慢的橋樑（例如，JavaScript到本地代碼）。它的啟動速度也快得多；
4）Dart使Flutter不需要單獨的聲明式佈局語言，如JSX或XML，或單獨的可視化界面構建器，因為Dart的聲明式編程佈局易於閱讀和可視化。所有的佈局使用一種語言，聚集在一處，Flutter很容易提供高級工具，使佈局更簡單；
5）開發人員發現Dart特別容易學習，因為它具有靜態和動態語言用戶都熟悉的特性。
Flutter 和 React Native 底層架構的比較
React-Native、Weex 核心是通過 Javascript 開發，執行時需要 Javascript 解釋器，UI 是通過原生控件渲染。Flutter 與用於構建移動應用程序的其它大多數框架不同，因為 Flutter 既不使用 WebView，也不使用操作系統的原生控件。 相反，Flutter 使用自己的高性能渲染引擎來繪 制 widget。Flutter 使用 C、C ++、Dart 和 Skia（2D渲染引擎）構建。
Flutter 和 React Native 底層架構的比較
Skia 是一個 2D的繪圖引擎庫，其前身是一個向量繪圖軟件，Chrome 和 Android 均採用 Skia 作為繪圖引擎。Android 自帶了 Skia，所以 Flutter Android SDK要比 iOS SDK小很多。
在 ReactNative 中，引入了虛擬 DOM 來減少DOM的迴流和重繪，系統將虛擬 DOM 與真正的 DOM 進行比較，生成一組最小的更改，然後執行這些更改，以更新真正的 DOM。最後，平臺重新繪製真實的 DOM 到畫布中。
React Native 是移動開發的一大進步，並且是 Flutter 的靈感來源，但 Flutter 更進一步。 在 Flutter 中，UI 組件和渲染器已經從平臺中集成到用戶的應用程序中。沒有系統 UI 組件可以操作，所以原來虛擬控件樹的地方現在是真實的控件樹。Flutter 渲染 UI 控件樹並將其繪製到平臺畫布上。
UI 一致性
Flutter 因為是自己做的渲染，因此在iOS和Android的效果基本完全一致。 React Native存在將RN控件轉換為對應平臺原生控件的過程，存在一定的差異（如之前在調研裡提到過的Button在iOS和Android下面顯示效果不一樣）。
動態化技術
Flutter使用的Dart語言，支持AOT和JIT兩種模式，在Dev時候，通過JIT可以實現熱重載，開發者可以即時的看到代碼修改的效果。而在Release Build的時候，通過AOT事先編譯，來最大化的優化性能。因此目前Flutter不支持代碼的熱更新。
ReactNative 的代碼通過加載 JSBundle.js執行，JSBundle.js可以保存在本地，也可以通過遠程加載。目前有很多RN的熱更新方案供選擇。
App體積
Flutter iOS空項目 30M左右，Android空項目 7M左右。 （iOS需要額外集成Skia） React Native iOS空項目 3M左右，Android20M左右。（Android會加入OKHttp導致體積增大）
Flutter 部分的底層功能在 Android 系統上已經有實現，因此 Android 上適配要好（RN在 Android 上有可能遇到兼容性問題）。
Flutter的優勢
運行效率上，Flutter和ReactNative都可以達到理論上的60幀的刷新率，來實現「Native般的流暢體驗」，Flutter是全Native在執行，基於底層代碼(Android 上為 C++ with NDK,iOS 上為 C++ with LLVM)，而ReactNative是Native控件 + JavaScript代碼，實際性能上，Flutter應該優於ReactNative，據官方文檔，Flutter可以在支持的設備上達到120FPS，而ReactNative的文檔上，只提到了可以達到60FPS（RN是否支持120FPS未深入調研，文檔上 RN 可以通過優化 diff 的方法提升渲染效率）。
Flutter的優勢
兼容性上，Flutter 提供的 widget 都是基於 skia來實現和精心定製的，與具體平臺沒關，所以能保持很高的跨 os 跨 os version 的兼容性。 Flutter 從更基礎的層去抹平平臺差異，站在了更寬廣、更可控的一個基礎平臺上去演變和發展。 Flutter 官方提供了大部分 Material Design 控件的實現（甚至比 Android Design Support 實現的更多）。
說了這麼多，那麼學習Flutter都需要掌握哪些知識呢？接下來給大家分享一個Flutter技術棧供大家參考
學習Flutter需要掌握的技術棧？
學習Flutter需要掌握的技術棧
該如何學習Flutter？
如何系統化的學習Flutter，可以從以下方面入手：
快速上手Flutter開發
Dart基礎知識
什麼是聲明式UI
Flutter入門基礎知識
項目結構、資源、依賴和本地化
認識視圖(Views)
佈局與列表
狀態管理
路由與導航
線程和異步UI
手勢檢測及觸摸事件處理
主題和文字處理
表單輸入與富文本
調用硬件、第三方服務以及平臺交互、通知
Flutter入門：Flutter必備基礎入門
學習構建Flutter實例項目
圖片控件開發詳解
動畫Animation開發指南
Flutter調試技巧
Flutter進階提升：網絡編程與數據存儲技術
基於Http實現網絡操作
異步：Future與FutureBuilder實用技巧
JSON解析與複雜模型轉換實用技巧
基於shared_preferences的本地存儲操作
Flutter列表組件
基於ListView實現水平和垂直方式滾動的列表
基於ExpansionTile實現可展開的列表
基於GridView實現網格列表
高級功能列表下拉刷新與上拉加載更多功能實現
Flutter，Native混合開發
Flutter混合開發流程與創建Flutter module
Flutter Android混合開發實戰-集成與調用
Flutter Android混合開發實戰-調試與發佈
Flutter iOS混合開發實戰-集成與調用
Flutter iOS混合開發實戰-調試與發佈
Flutter通信機制&Darr端實現
Flutter與Native通信-Android端實現
Flutter與Native通信-Android實戰
Flutter與Native通信-iOS端實現
Flutter與Native通信-iOS端實戰
Flutter智能AI語音搜索模塊實現
Native SDK集成流程
百度AI語音SDK引入
語音搜索功能實現
Flutter開發包和插件開發指南
Flutter插件開發流程與步驟（LoadingContainer）
Flutte插件開發與發佈
Flutter全面屏、摺疊屏適配與兼容問題
Flutter 全屏幕、摺疊屏適配指南
Flutter 適配iOS、Android全面屏
Flutter打包發佈Flutter應用
Flutter項目優化
打包發佈Flutter Android應用
打包發佈Flutter iOS應用
Flutter升級與適配指南
Flutter升級與適配指南
按這個路徑學習完，你就是Flutter大神，等著被膜拜吧。
學習資料
GitHub - crazycodeboy/awesome-flutter-cn: 一個很棒的Flutter學習資源，官方教程，插件，工具，文章，App，視頻教程等的資源列表
公告
喜歡小編的點擊關注，瞭解更多知識！