邂逅Flutter開發
一、Flutter是什麼?
- Flutter是一個UI SDK(Software Development Kit) p可以進行移動端(iOS、Android)，Web端(Beta)，桌面(technical preview)，跨平臺解決方案;
- 移動端目前已經很多公司在用，Google、阿里、騰訊
- 特別是阿里的鹹魚團隊，爲Flutter做了非常多的貢獻;
- Flutter它是有一統大前端的野心的，並且它正在侵蝕iOS、Android這些原生開發;
1.1 Flutter 文檔鏈接
二、Flutter的特點
美觀、快速、高效、開放
2.1 美觀:
- 使用Flutter內置美麗的Material Design和Cupertino widget(什麼是widget，不着急)、豐富的motion API、平滑而自然的 滑動效果和平臺感知，爲您的用戶帶來全新體驗。
2.2 快速:
- Flutter 的 UI 渲染性能很好。在生產環境下，Flutter 將代碼編譯成機器碼執行，並充分利用 GPU 的圖形加速能力，因此使用Flutter 開發的移動應用即使在低配手機上也能實現每秒 60 幀的 UI 渲染速度。
- Flutter 引擎使用 C++ 編寫，包括高效的 Skia 2D 渲染引擎，Dart 運行時和文本渲染庫。
2.3 高效:
- Hot Reload (熱重載) ，在前端已經不是什麼新鮮的東西，但在移動端之前一直是沒有的
2.4 開放:
- Flutter 是開放的，它是一個完全開源的項目。
三、平臺獨立開發
- 完整的軟件系統需要移動端:iOS端和Android端
- iOS端使用OC、Swift來進行開發，大部分iOS程序員目前這兩個都需要掌握;(iOS開發工程師)
- Android端使用Java、Kotlin來進行開發，使用Java開發Android會更多一些;(Android開發工程師)
- 對於公司來說成本其實是非常高的。
四、跨平臺歷史
4.1 跨平臺解決方案一:webview
基於 JavaScript 和 WebView的跨平臺
- 最早出現的跨平臺框架是基於 JavaScript 和 WebView，
代表框架有PhoneGap，Apache Cordova，Ionic 等等。 - 主要是通過HTML來構建自己的界面，再將其顯示在各個 平臺的WebView中。
- 但是它默認是不能調用本地的一些服務的(比如相機、 藍牙等)，所以需要通過JavaScript進行橋接調用Native 的一些代碼來完成某些功能。
- 但是，它本身的體驗、性能都並不理想，而且開發過程 中的坑非常多。
4.2 跨平臺解決方案二:React Native
- 在尋求最佳跨平臺解決方案的過程中，無疑React Native 是之前最優秀的一個。
- React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺 移動應用開發框架，是Facebook早先開源的JS框架 React 在原生 移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。
- RN使用JavaScript語言，類似於HTML的JSX，以及CSS來開發移 動應用，因此熟悉Web前端開發的技術人員只需很少的學習就可 以進入移動應用開發領域。
- 並且在保留基本渲染能力的基礎上，用原生自帶的 UI 組件實現核 心的渲染引擎，從而保證了良好的渲染性能。
- 但是，由於RN的本質是通過JavaScript VM調用原生接口，通信 相對比較低效，而且框架本身不負責渲染，而是是間接通過原生 進行渲染的。
4.3 跨平臺解決方案三:Flutter
flutter - native - rn的區別
- Flutter利用Skia繪圖引擎，直接通過CPU、GPU進行繪製，不需要依賴任何原生的控件
- Android操作系統中，我們編寫的原生控件實際上也是依賴於Skia進行繪製，所以flutter在某些Android操作系統上甚至還要高 於原生(因爲原生Android中的Skia必須隨着操作系統進行更新，而Flutter SDK中總是保持最新的)
- 而類似於RN的框架，必須通過某些橋接的方式先轉成原生進行調用，之後再進行渲染。
五、Flutter繪製原理圖
- GPU將信號同步到 UI 線程
- UI 線程用Dart來構建圖層樹
- 圖層樹在GPU 線程進行合成 p合成後的視圖數據提供給Skia 引擎
- Skia 引擎通過OpenGL 或者 Vulkan將顯示內容提供給GPU
5.1 這也是flutter區別於React Native的本質區別:
- React Native 之類的框架，只是通過 JavaScript 虛擬機擴展調用系統組件，由 Android 和 iOS 系統進行組件的渲染;
- Flutter 是自己完成了組件渲染的閉環
5.2 渲染引擎skia
-
Skia就是 Flutter向 GPU提供數據的途徑。
- Skia(全稱Skia Graphics Library(SGL))是一個由C++編寫的開源圖形庫
- 能在低端設備如手機上呈現高質量的2D圖形，最初由Skia公司開發，後被 Google收購
- 應用於Android、Google Chrome、Chrome OS等等當中。
-
目前，Skia 已然是 Android 官方的圖像渲染引擎了，因此 Flutter Android
SDK 無需內嵌 Skia 引擎就可以獲得天然的 Skia 支持; -
而對於 iOS 平臺來說，由於 Skia 是跨平臺的，因此它作爲 Flutter iOS 渲染引 擎被嵌入到 Flutter 的 iOS SDK 中，替代了 iOS 閉源的 Core Graphics/Core Animation/Core Text，這也正是 Flutter iOS SDK 打包的 App 包體積比 Android 要大一些的原因。
-
底層渲染能力統一了，上層開發接口和功能體驗也就隨即統一了，開發者再也不 用操心平臺相關的渲染特性了。也就是說，Skia 保證了同一套代碼調用在 Android 和 iOS 平臺上的渲染效果是完全一致的。
六、在 macOS 上安裝和配置 Flutter 開發環境
6.1 安裝Flutter SDK
6.2 配置鏡像
macOS或者Linux操作系統，依然是編輯~/.bash_profile文件
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn