學習Flutter從0開始

一. 認識Flutter

1.1. 什麼是Flutter

先看看官方的解釋：

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for  mobile,  web, and  desktop from a single codebase.

簡單翻譯一下：

Flutter是谷歌主導研發的一個UI工具包，能夠利用它，使用很是簡潔的代碼開發出漂亮的、原生的應用程序，不管是在移動端、Web端仍是桌面端。

嗯，加入我的理解：

Flutter就是一個UI開發工具包，能夠開發各個平臺，可是目前最活躍的地方依然 移動平臺，雖然他也支持Web、桌面，甚至也將是 Google Fuchsia下開發應用的主要工具。
可是如今，它只是活躍於移動端。

那麼，目前移動平臺主要有哪些呢？沒錯，iOS、Android！

因而，咱們能夠簡單概述一下Flutter：

Flutter目前被應用最普遍的就是做爲iOS、Android跨平臺解決方案，並且能夠說是目前最優秀的跨平臺解決方案。
它不只僅性能 優越，並且開發很是 高效！

 

爲何須要這樣一種跨平臺解決方案呢？

待會兒我會講到移動端開發的歷史（各端獨立開發到跨平臺開發的出現）以及在整個歷史進程中出現的各個痛點，直到Flutter的出現。

 

1.2. Flutter的特色

Google公司在國內作過不少宣講，其中屢次提到Flutter的幾個特色： 美觀、快速、高效、開放。
這部分了解便可，後面學習過程當中，慢慢體會。

美觀

使用Flutter內置美麗的Material Design和Cupertinowidget（什麼是widget，不着急）、豐富的motion API、平滑而天然的滑動效果和平臺感知，爲您的用戶帶來全新體驗。

固然，在咱們真正學會使用它開發以前，這些東西不能深入的體會，後面你們會慢慢體會到的

快速

後面有專門講解爲何性能這麼高，先作一個瞭解便可

Flutter 的 UI 渲染性能很好。在生產環境下，Flutter 將代碼編譯成機器碼執行，並充分利用 GPU 的圖形加速能力，所以使用 Flutter 開發的移動應用即便在低配手機上也能實現每秒 60 幀的 UI 渲染速度。

Flutter 引擎使用 C++ 編寫，包括高效的 Skia 2D 渲染引擎，Dart 運行時和文本渲染庫。

這個引擎使得 Flutter 框架能夠自由、靈活、高效地繪製 UI 組件。而應用開發者則能夠用 Flutter 框架來輕鬆實現各類設計語言和動畫效果。

 

 

高效

對開發者來講，使用 Flutter 開發應用十分高效。

Flutter 廣受好評的 Hot Reload (熱重載) 功能能夠在 1 秒內實現代碼到 UI 的更新，使得開發操做週期被大幅縮短。

另外，熱重載可以在執行的時候保留應用的當前狀態 (即 Stateful)，好比您可能在修改一個導航結構裏的子頁面，保留狀態的熱重載可讓您不須要從新從起始頁一路點擊回到這個子頁面，而是在代碼修改完成後即刻看到結果。

 

 

開放

Flutter 是開放的，它是一個徹底開源的項目。全球的開發者均可以避免費使用和拓展 Flutter 的源代碼，併爲 Flutter 的生態和文檔做貢獻。 咱們已經看到許多中國開發者（好比閒魚開發團隊）活躍在社區中，併爲 Flutter 作出了不少貢獻。

 

 

 

二. 跨平臺歷史

2.1. 平臺獨立開發

目前移動端有兩大系統：iOS和Android

不少公司爲了擴散本身的產品，都須要在兩大系統上跑本身的應用程序App

• 意味着Android系統上須要一個Android版本的App
• 意味着iOS系統上須要一個iOS版本的App
• 可是他們的開發方式徹底不一樣！！！

iOS系統

• 最初，若是但願在其上開發應用程序，所採用的語言是Objective-C（沒用過的人會被他的語法嚇到）。
• 2014年，蘋果在WWDC大會上發佈了新的語言Swift，Swift更加現代化，也更加接近於其餘語言，被認爲是Objective-C的替代品（可是到如今都尚未替代，兩個都在用）。
• 也就是如今開發iOS系統上的應用須要掌握兩門語言：Objective-C和Swift

Android系統

• 最初，若是但願在其上開發應用程序，所採用的語言是Java
• 2011年JetBrains推出Kotlin項目，在Google I/O2017中，Google宣佈在Android上爲Kotlin提供最佳支持
• 也就是如今開發Android系統上的應用須要掌握兩門語言：Java和Kotlin

一般在一個公司，很難讓一我的同時去勝任iOS開發和Android開發兩個崗位，因此在一家公司可能就須要同時有iOS組和Android組分別針對不一樣的系統進行開發。

可是，對於一家小公司來講，這樣的成本是很是高的。

在很長一段時間內，你們都在需求一種移動端的跨平臺解決方案，但願能夠經過一套代碼開發出能夠同時運行在iOS和Android兩個系統上的應用程序

 

2.2. 跨平臺解決方案

基於 JavaScript 和 WebView的跨平臺

最先出現的跨平臺框架是基於 JavaScript 和 WebView，表明框架有PhoneGap，Apache Cordova，Ionic 等等。

主要是經過HTML來構建本身的界面，再將其顯示在各個平臺的WebView中。

可是它默認是不能調用本地的一些服務的（好比相機、藍牙等），因此須要經過JavaScript進行橋接調用Native的一些代碼來完成某些功能。

可是，它自己的體驗並不理想，並且開發過程當中的坑很是多。

 

 

 

備受歡迎的React Native

在尋求最佳跨平臺解決方案的過程當中，無疑React Native 是以前最優秀的一個。

React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。

RN使用JavaScript語言，相似於HTML的JSX，以及CSS來開發移動應用，所以熟悉Web前端開發的技術人員只需不多的學習就能夠進入移動應用開發領域。

而且在保留基本渲染能力的基礎上，用原生自帶的 UI 組件實現代替了核心的渲染引擎，從而保證了良好的渲染性能。

可是，因爲RN的本質是經過JavaScript VM調用遠程接口，通訊相對比較低效，並且框架自己不負責渲染，而是是間接經過原生進行渲染的。

還有一個就是在進行iOS和Android適配的過程當中，還要求開發者對兩大系統自己有所熟悉才行。

所在在RN上作出很是多貢獻的Airbnb以前就宣佈放棄RN，而轉向Native進行開發。

 

 

多是終極的解決方案: Flutter

從Flutter出現到如今，我我的就一直很是看好，由於它可能纔是咱們好久依賴所期待的跨平臺的終極解決方案。

咱們直接看下面這幅圖來對比flutter - native - rn的區別

• Flutter利用Skia繪圖引擎，直接經過CPU、GPU進行繪製，不須要依賴任何原生的控件（後面有原理講解）
• Android操做系統中，咱們編寫的原生控件實際上也是依賴於Skia進行繪製，因此flutter在某些Android操做系統上甚至還要高於原生（由於原生Android中的Skia必須隨着操做系統進行更新，而Flutter SDK中老是保持最新的）
• 而相似於RN的框架，必須經過某些橋接的方式先轉成原生進行調用，以後再進行渲染。

具體Flutter如何實現接近於原生的高性能的，下一個章節咱們具體分析。

 

 

 

 

 

三. Flutter繪製原理

這個章節設計到一些圖形繪製的原理，對於某些沒有基礎的同窗可能會有一些困難，這個沒有關係，並不影響後續的學習。

3.1. Flutter渲染本質

問題：一個圖像究竟是如何顯示到屏幕上的呢？

首先，你須要知道，咱們在屏幕上能夠看到的全部內容都是計算機繪製出來的圖像，不管是視頻仍是GIF圖片，仍是操做系統給咱們看到的圖形化界面中的畫面，都是圖像。

好比下面的一個GIF圖片

 

 

 

咱們將它分解出來，就會發現它是不少張圖片連續播放所看到的畫面

 

 

可是咱們爲何能看到相似於動畫的效果呢？

這是由於它播放的速度很是快，研究代表：

• 當圖片連續播放的頻率超過16幀（16張圖片），人眼就會感受很是流暢，當少於16幀時，會感受到卡頓
• 因此咱們平時看到的電影，一般都是24幀或者30幀的（李安以前拍攝120幀的電影，目的就是讓圖片間隔更小，畫面更加的流暢）

咱們說回到電腦、手機屏幕的顯示

事實上顯示器就是以固定的頻率顯示圖像的，好比 iPhone的 60Hz、iPad Pro的 120Hz。

一幀圖像繪製完畢後準備繪製下一幀時，顯示器會發出一個垂直同步信號（VSync），因此 60Hz的屏幕就會一秒內發出 60次這樣的信號。

 

 

在計算機系統中，CPU、GPU和顯示器以一種特定的方式協做：

• CPU將計算好的顯示內容提交給 GPU；
• GPU渲染後放入幀緩衝區；
• 視頻控制器按照 VSync信號從幀緩衝區取幀數據傳遞給顯示器顯示；

固然，Android、iOS 的 UI 渲染過程是如此，Flutter 也是如此，在整個 Flutter 架構中，Flutter 只關心向 GPU 提供顯示數據，並不關心顯示器、視頻控制器以及 GPU 是如何工做的。

 

 

• GPU將信號同步到 UI 線程
• UI 線程用Dart來構建圖層樹
• 圖層樹在GPU 線程進行合成
• 合成後的視圖數據提供給Skia 引擎
• Skia 引擎經過OpenGL 或者 Vulkan將顯示內容提供給GPU

這也是flutter區別於React Native的本質區別：

• React Native 之類的框架，只是經過 JavaScript 虛擬機擴展調用系統組件，由 Android 和 iOS 系統進行組件的渲染；
• Flutter 則是本身完成了組件渲染的閉環。

3.2. Dart語言優點

Flutter爲何要選擇Dart做爲開發語言？

有一種半開玩笑的說法： 由於Dart團隊就在Flutter團隊的旁邊，溝通起來很是方便（是玩笑，也是事實，dart語言自己針對Flutter進行過不少次的優化）

早期的 Flutter 團隊評估了十多種語言，並選擇了 Dart，由於它符合他們構建用戶界面的方式。

其實針對於前端開發者來講，選擇JavaScript看起來更合適，由於你們的入門成本會更低，會有更多人選擇學習和使用Flutter。

可是Flutter團隊從一開始就決定，不將就！！！

• Dart 是 AOT（Ahead Of Time）編譯的，編譯成快速、可預測的本地代碼，使 Flutter 幾乎均可以使用 Dart 編寫。這不只使 Flutter 變得更快，並且幾乎全部的東西（包括全部的小部件）均可以定製。
• Dart 也能夠 JIT（Just In Time）編譯，開發週期異常快，工做流顛覆常規（包括 Flutter 流行的亞秒級有狀態熱重載）。
• Dart 能夠更輕鬆地建立以 60fps 運行的流暢動畫和轉場。Dart 能夠在沒有鎖的狀況下進行對象分配和垃圾回收。就像 JavaScript 同樣，Dart 避免了搶佔式調度和共享內存（於是也不須要鎖）。因爲 Flutter 應用程序被編譯爲本地代碼，所以它們不須要在領域之間創建緩慢的橋樑（例如，JavaScript 到本地代碼）。它的啓動速度也快得多。
• Dart 使 Flutter 不須要單獨的聲明式佈局語言，如 JSX 或 XML，或單獨的可視化界面構建器，由於 Dart 的聲明式編程佈局易於閱讀和可視化。全部的佈局使用一種語言，彙集在一處，Flutter 很容易提供高級工具，使佈局更簡單。
• 開發人員發現 Dart 特別容易學習，由於它具備靜態和動態語言用戶都熟悉的特性。

並不是全部這些功能都是 Dart 獨有的，但它們的組合卻恰到好處，使 Dart 在實現 Flutter 方面獨一無二。所以，沒有 Dart，很難想象 Flutter 像如今這樣強大。

 

3.3. 渲染引擎skia

想要了解Flutter的本質，必須先了解它的底層圖像渲染引擎 Skia，前面提到了 Flutter只關心如何構建視圖抽象結構，向 GPU提供視圖數據。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 平臺上的渲染效果是徹底一致的。

 

 

 

四. 如何學習flutter

4.1. 大前端學不動了

不少人看到Google的flutter框架的時候，第一反應就是：別出新東西了，實在學不動了。

可是做爲大前端開發者就是這樣，各類折騰：

• 客戶端開發者：從Android到iOS，或者從iOS到Android，到RN，甚至如今愈來愈多的客戶端開發者接觸前端相關知識（Vue、React、Angular、小程序）
• 前端開發者：從jQuery到AngularJS，到三大框架並行：Vue、React、Angular，還有小程序，甚至如今也要接觸客戶端開發（好比RN、Flutter）

大前端開發就是，不像服務器同樣可能幾年甚至幾十年仍是那一套的東西，新技術會層出不窮。

可是每同樣技術的出現都會讓驚喜，由於他必然是解決了以前技術的某一個痛點的，因此咱們要學會擁抱這種變化。

而且不少知識在學習的過程當中，你會發現他們都是相同的，並非說都要從頭再來，最重要的是創建屬於本身的知識體系。

 

4.2. flutter學得會嗎？

不少人對於學習望而卻步，主要是基於兩點考慮：

• 學習一門全新的語言：dart，也就是你必須從你原來熟悉的語言JavaScript或Swift或Java或其餘轉向這門全新的語言。
• flutter是全新的跨平臺技術，意味着本身須要去學習不少新的內容：開發模式、框架原理、底層原理渲染機制等等

dart語言並不複雜，並且很是現代化

• 首先，全部編程語言都是大同小異，你花兩天的時間去練習必定能夠快速掌握它。（我我的一直認爲一個開發者不可能在整個開發生涯只會一種編程語言，不現實！）
• 其次，dart語言幾乎集結了現代語言全部好用的特性，並不複雜（後面咱們慢慢來學）

flutter並無很是多創新的概念：

• flutter從其餘框架中借鑑了很是多設計思想：框架原理、底層渲染機制、事件處理方式都大同小異。
• 聲明式編程方式、組件化開發也是現代框架都有的特性，好比Vue、React。
  
  
  轉載自：https://zhuanlan.zhihu.com/p/82337696