第一章 Flutter簡介
歡迎來到Flutter的世界。
Flutter是由Google與社群開發的開源移動應用軟體開發工具包，即可用於Android App開發，也可用於iOS App開發。
雖然Flutter剛誕生不久，但已被廣泛應用於眾多成熟的App，如閒魚、京東金融等。而且，越來越多的廠商在進行技術選型上選擇Flutter，因此，我們也會看到越來越多的使用Flutter技術的App出現。此外，除了支援流行的Android和iOS平臺，對Google的新作業系統——Fuchsia而言，Flutter將是其開發應用的主要工具。Fuchsia同樣開源，且可執行在各種平臺的裝置上，比如行動電話、平板電腦，甚至是PC。某些機構評價：Fuchsia將是一套現代的，面向物聯網的作業系統。
因此，Flutter具備很強的發展潛力。如果你想成為一名移動開發工程師，或者已經是一名移動開發工程師，開發基於Flutter的App則是當前必知必會的技能。
但是，正如各位讀者所熟知的，要使用Flutter，除了掌握Flutter本身的常用API之外，還要學習一門新的語言——Dart，這聽上去似乎一下子提高了技術門檻。但是，不必擔心，Dart程式語言並不難。本書將一步一步地帶你學會Dart，然後掌握Flutter的各種開發技巧。本書面向的是“0基礎”的讀者，因此，你不必為自己的基礎能力擔憂，如果你之前使用過其他的高階程式語言，如Java，C++等，你會覺得更加輕鬆。
下面，我們就一起走進Flutter的世界，這將會是一次美好的旅程，讓我們開始吧！
1.1 移動App開發的前世今生
2007年1月9日，第一代iPhone正式釋出了。硬體上，它具有3.5英寸的觸控顯示屏，支援多點觸控，金屬材質的機身，和僅提供拍照功能的相機；軟體上，使用者需要付費，才能使用完整版的iPhone OS（後來改名為現在的iOS），甚至連桌布都無法實現自定義更換。這些配置在現在看上去非常落後，但是在當時，iPhone的出現著實讓人眼前一亮。人們意識到，原來“手機”並不只能打電話，發簡訊，它還可以用來瀏覽網頁、拍攝照片，而且執行在機器上的程式是那麼實用且美觀。轉年的6月，隨著iPhone 3G的釋出，iPhone OS 2.0.1版本隨之而來，App Store也誕生於此。從此，使用者不僅可以只是用裝置內建的幾款應用，還可以從App Store中瀏覽和下載自己需要的應用程式；同時，那些為iPhone OS（即現在的iOS）開發App的第三方開發者也可從付費應用中獲利，移動App的開發正式興起。
另一方面，2003年10月，由Andy Rubin等4人在加州建立了Android Inc.，並開發出了Android作業系統。這一起初僅面向數碼相機的作業系統在智慧手機快速成長的市場中，逐漸成為了面向智慧手機的作業系統。2005年被Google收購後，經過不斷改良創新並開源，最終使得Android作業系統遍佈不同廠商、不同價位的裝置上。截止到2010年，市場佔有率已經稱霸全球。同樣地，Android作業系統能夠達到如此普及的地步，和豐富多彩的App是分不開的。
根據NetMarketShare機構統計，截止到2018年12月，全球的移動作業系統市場佔有率，Android以68.93%的比率領先第二名iOS的29.29%，成為市場佔有率最高的移動作業系統。
起初，在開發這些用於不同作業系統平臺的App時，人們使用平臺各自官方建議的程式語言和特性分別進行開發。Android平臺大多使用Java（近年誕生了Kotlin）；iOS大多使用Objective-C（近年誕生了Swift）。這也就意味著，對於同樣一款程式，人們往往要經歷兩次完整的軟體開發過程。而這一過程有時是很消耗時間成本的，少則幾個月，多則一年。而在網際網路行業競爭異常激烈的今天，如何減少成本開銷，縮短開發週期成為了需要解決的問題。
後來人們漸漸意識到，如果能有一種開發語言或者開發工具，只需要編碼一次，就能開發出既適用於iOS，也同樣適用於Android平臺的App，這將使開發效率翻倍。於是，跨平臺的思維誕生了。
經過開發者們對跨平臺的渴望和不懈努力，到今天為止，實現跨平臺的技術路線概括起來有三條：Web App，Hybrid混合開發以及跨平臺框架。
Web App可謂是上述三條路線的前輩了。因為早在智慧機尚未普及的時候，適用於移動端的網頁就已經出現了。比如Wap騰訊新聞、Wap QQ等等，我們甚至可以通過它和QQ好友聊天、去QQ空間偷菜……這類“App”無需使用者安裝，只需訪問指定的地址就可以執行。相較上述這些“傳統”的Wap網站，Google推出的“PWA”（漸進式網路應用）更像是一個原生應用。它可以在主螢幕上建立快捷方式，以完全獨立的方式執行，甚至在斷網狀態下依然可用，體驗和原生應用很相近。但是，“PWA”依然有其限制，考慮到受網路環境影響較大，在國內的使用率並不高。
Hybrid混合開發是指App的一部分採用原生技術開發，一部分使用Web網頁開發，二者之間靠WebView互動。為了更好地處理這種互動，誕生了很多用於混合開發的框架，比如PhoneGap（後來的Cordova），還有國產的DCloud。他們都是通過JavaScript去訪問裝置的硬體，以實現和原生App同樣的能力。但是它們仍然有其限制，當WebView效能低下時，App的反應隨之變慢，使用者體驗極差。
跨平臺框架中，比較耳熟的大概要數“React Native”了。由於在UI層，仍然使用平臺各自的控制元件，因此在效能上要優於Web App和Hybrid模式，而且支援熱修復，為App更新提供了方便。但是，在動畫效能上仍略顯不足，而且並不能完全擺脫原生程式碼，再加上除錯困難使得一部分人們不得不放棄ReactNative，甚至連Airbnb的技術團隊也宣佈棄用React Native。
Flutter最早起源於2015年，屬於“跨平臺框架”，其前身稱為“Sky”，並使用Dart程式語言作為開發語言，提供了最為接近原生的體驗。
為什麼我們選擇Flutter？它到底有哪些地方吸引我們？和其他框架相比，它又有哪些優勢？帶著這些疑問，我們進入下一小節。
1.2 為什麼選擇Flutter
1.2.1 Flutter的優勢
- 快速開發和迭代：Flutter自身提供熱修復（熱過載）特性，儘管有其使用限制，但是它依然能夠為開發過程提供更高的效率。另外，Flutter SDK還允許我們修復崩潰並繼續從應用程式停止的地方進行除錯。
- 介面流暢，樣式美觀：對於不同的平臺（Android和iOS），Flutter提供了各自風格的控制元件，滿足不同平臺的設計哲學。
- 原生效能：Flutter提供了一種響應式檢視，無需JavaScript做橋接，以及強大的 API使得實現複雜的介面效果成為可能，高效能的渲染機制使得120 FPS的高幀率（在120HZ重新整理率的裝置上）同樣輕而易舉。此外，有證據表明，當介面上的圖片數量越來越大時，和React Native相比，Flutter的優勢越來越明顯。
- 靈活的跨平臺開發：Flutter可以單獨作為開發框架完成整個App的開發，也可以與現有原生程式碼相結合，實現Hybrid混合模式開發。
1.2.2 Flutter強大的跨平臺特性
Flutter支援iOS、Android以及Fuchsia平臺的App開發。正如前文中提及的那樣，Flutter的優勢之一就是“靈活的跨平臺開發”。
官方稱Flutter具備“統一的應用開發體驗”。它擁有豐富的工具和庫，我們在後面的學習中會越來越有體會。正是這些工具和庫，使得開發者可以同時在iOS和Android平臺盡情揮灑自己的創意。
同時，Flutter又可以訪問本地功能及SDK，它可以複用現有的程式碼，雖然各平臺有所區別，但它仍能很好地處理iOS和Android平臺的差異，使得原生和Flutter框架之間無縫對接，甚至可以滿足和NDK之間的通訊。
此外，Flutter保持了不同平臺的UI設計理念。對於iOS使用Cupertino風格，對於Android使用Material Design風格。很好地處理了不同UI設計語言的差異性，確保使用者能有Pure iOS和Pure Android的體驗，而不是簡單粗暴地使用一種UI風格滿足不同平臺。
下圖是Flutter官網列出的適用於iOS平臺和Android平臺不同UI風格的元件的一部分：
Android平臺不同風格的元件庫
Flutter 的目標是用來建立高效能、高穩定性、高幀率、低延遲的 Android 和 iOS 應用。
1.2.3 Flutter的明天
今天，阿里、谷歌、京東、騰訊……越來越多的廠商使用Flutter技術。在其官方網站的Showcase頁面上，向我們展示了眾多使用Flutter技術開發的產品。
Flutter官網的Showcase頁面
更多App展示可以訪問： https://itsallwidgets.com/ 瀏覽。
Flutter自身仍然在快速發展迭代更新著，截止到編寫本書為止，Github上已經有超過13500次提交，超過140個Release。而且從issues的處理反饋上看，解決數量之多，響應速度之快非常令人稱讚。再加上背靠Google這座大山，我們有理由相信，在未來，Flutter開發技術會越來越得到開發者的青睞，會有越來越多的App使用Flutter SDK開發；Flutter SDK自身也會日趨完善，功能日益豐富。
1.3 Flutter的體系結構
Flutter框架結構如下圖所示：
Flutter 分層框架結構圖
從圖中我們可以看到，Flutter是一個分層結構框架，每一層建立在其上一層的基礎上。它主要包括三大層級，分別是Framework（框架層）、Engine（引擎層）和Embedder（嵌入層）。其中，Framework層開源，我們開發的App都是基於Framework開發的，並執行在Engine層上。
Framework層使用Dart實現，它包含了所有和UI相關的元件、動畫、手勢等等。
Engine層使用C/C++實現，主要涵蓋了Skia、Dart和Text。其中，Skia是開源的圖形庫，提供適用於多種軟硬體平臺的API；Dart層包含了Dart執行時、垃圾收集、JIT編譯（Just In Time動態即時編譯，用於Debug模式）、AOT編譯（Ahead Of Time靜態提前編譯，用於Release/Profile模式）；Text則負責文字渲染。
Embedder層確保了各平臺的相容性。在Android和iOS平臺上，Embedder層負責將Flutter完美地“嵌入”到它們中去。而Flutter只提供畫布，所有內容的繪製渲染邏輯均在Flutter內部完成。實現了和平臺的無關性。
Flutter內部的繪製渲染是整個Flutter跨平臺技術的核心。它直接使用Skia引擎來渲染每個元件，既擺脫了對瀏覽器的束縛，又擺脫了和平臺密切相關的原生控制元件。由於Flutter對於Android和iOS平臺都是採用AOT靜態編譯，因此確保了使用Flutter開發技術的App能夠使用本機指令集執行。換言之，這一設計既滿足了所謂“統一的應用開發體驗”，又確保了App的執行效能。
在實際開發過程中，我們經常用到的是位於最上層層級提供的功能。例如：Material和Cupertino分別對應Android和iOS的UI設計風格，它們都使用了Widgets層的控制元件，只不過是做了很多的搭配組合。類似地，我們也可以混搭各種Widgets，實現自定義控制元件。同樣，Widgets層依賴Rendering層來構建……
如果其中某一層無法滿足專案需求，我們甚至可以使用更下一層的能力來自定義。可見，如此靈活的層級結構滿足了多種需求。也正是這一點，吸引了很多開發者紛紛投入Flutter的懷抱。
現在，是不是躍躍欲試，想要親自動手實踐一下？
好吧，純理論的部分到此為止，讓我們繼續我們的行程，親自動手嘗試吧！