# 前言 現在，主流的移動開發平臺是Android和iOS，每個平臺上的開發技術不太一樣，針對每個平臺開發應用需要特定的人員，但這樣一來開發效率低下，因而需要進行跨平臺開發。跨平臺技術從最開始的Hybrid混合開發技術，到React Native的橋接技術，一直在演進。 Hybrid開發主要依賴于WebView。但WebView是一個重量級的控件，很容易產生內存問題，而且復雜的UI在WebView上顯示的性能不好。React Native技術拋開了WebView，利用JavaScript Core來做橋接，將JavaScript調用轉為Native調用。React Native最終會生成對應的自定義原生控件。這種策略將框架本身和App開發者綁在系統的控件上，不僅框架本身需要處理大量平臺相關的邏輯，隨著系統版本變化和API的變化，開發者可能也需要處理不同平臺的差異，甚至有些特性只能在部分平臺上實現，這樣使得跨平臺特性大打折扣。 Flutter是最新的跨平臺開發技術，可以橫跨Android、iOS、MacOS、Windows、Linux等多個系統。Flutter采用了更為徹底的跨平臺方案，即自己實現了一套UI框架，然后直接在GPU上渲染UI頁面。 筆者最早接觸的跨平臺技術是Adobe Air技術，寫一套Action Script代碼可以運行在PC、Android及iOS三大平臺上。目前，筆者與朋友開發視頻會議產品，需要最大化地減少前端的開發及維護工作量，所以，我們先后考察過Cordova、React Native及Flutter等技術。我們覺得Flutter方案更加先進，效率更高，后來就嘗試用Flutter開發了全球第一個開源的WebRTC插件（可在GitHub上搜索Flutter WebRTC）。 寫作本書的目的是想傳播Flutter知識（因為Flutter確實優秀），想為Flutter社區做點貢獻的同時也為我們的產品打下堅實的技術基礎。通過寫作本書，筆者查閱了大量的資料，使得知識體系擴大了不少，收獲良多。 ### 本書主要內容 第1章介紹Flutter的基本概念，并搭建第一個Flutter程序，來感受一下Flutter之美。 第2章介紹幾個重要知識點，如入口程序、Material Design、Flutter主題、無狀態組件和有狀態組件、使用包資源、Http請求。 第3章簡單介紹Dart語言。Dart語言是Flutter SDK指定的語言，我們很有必要補充一下它的基礎知識，包括語法特性、基本語句、面向對象等。 第4章介紹常用組件。Flutter里有一個非常重要的核心理念：一切皆為組件，本章主要講解開發中用得最頻繁的組件，如容器組件、圖片組件、文本組件、圖標組件和表單組件等。 第5章介紹Material Design風格的組件，Material Design風格是一種非常有質感的設計風格，并提供一些默認的交互動畫。本章將分類介紹這些組件。 第6章介紹Cupertino風格的組件，這是一類iOS風格的組件，如CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。 第7章介紹頁面布局的基礎知識和技巧，如基礎布局處理、寬高尺寸處理、列表及表格布局等，最后通過一個綜合布局示例來演示如何編寫復雜的頁面。 第8章介紹如何處理手勢，如輕擊、拖動和縮放等。Flutter中提供GestureDetector進行手勢檢測，并為手勢檢測提供了相應的監聽。 第9章介紹如何加載、處理、展示資源和圖片，如添加資源和圖片、自定義字體等。 第10章介紹路由及導航是如何處理的，包括頁面的渲染以及數據傳遞。 第11章介紹組件裝飾和視覺效果的處理，如Opacity（透明度處理）、DecoratedBox（裝飾盒子）、RotatedBox（旋轉盒子）、Clip（剪裁處理）和CustomPainter（自定義畫板）。 第12章介紹動畫效果的制作，包含兩個動畫組件的使用：用AnimatedOpacity實現漸變效果、用Hero實現頁面切換動畫。 第13章介紹Flutter插件開發的入門知識。Flutter插件可以和原生程序打交道，比如調用藍牙、啟用WIFI、打開手電筒，等等。 第14章介紹開發工具及使用技巧，介紹幾款常用的IDE工具，從代碼的編寫、輔助功能、程序調試、性能分析等多方面講解工具及使用技巧。 第15章介紹測試與發布應用，包括：測試應用、發布Android版和iOS版App。 第16章通過一個綜合案例介紹如何使用Flutter實現即時通訊App的界面。 #### 閱讀建議 本書是一本基礎入門加實戰的書籍，既有基礎知識，又有豐富示例，包括詳細的操作步驟，實操性強。由于Flutter大量使用組件，所以本書對組件的講解很詳細，包括基本概念、屬性及代碼示例。每個組件都配有小例子，力求精簡，還提供了配套網站提供完整代碼，復制完整代碼就可以立即看到效果。這樣會給讀者信心，在輕松掌握基礎知識的同時快速進入實戰。 如果你正在使用類似React Native等跨平臺的技術，那么學習Flutter相對輕松很多。使用Flutter構建應用時，需要Android和iOS知識，因為Flutter依賴移動操作系統提供眾多功能和配置。Flutter是一種為移動設備構建用戶界面的新方式，但它有一個插件機制可與Android和iOS進行數據及任務通信。本書有一章專門講解Flutter的插件開發技術，可以作為進一步學習的起點。 Flutter引用了大量Web開發的知識，比如FlexBox布局方式、盒模型等，這些都引用了CSS的一些思想。所以從UI界面的實現角度來說，只需要熟悉Dart語言就能輕松上手Flutter。本書專門有一章介紹Dart語言的基礎知識。 建議讀者在一開始先把第1～3章基礎理論通讀一遍。到第4章時實際操作并運行每個例子，這樣就能開發Flutter最簡單的界面了。 第5章和第6章通讀即可。第7章介紹的構建頁面布局都是開發中常用的布局方法，建議讀者仔細閱讀、實際操作并運行每個例子。尤其是最后的布局綜合例子，按步驟都走一遍，就能理解布局的思路。 第8～12章涵蓋Flutter的高級用法，在開發中也經常使用。可以根據實際項目開發和學習的需要閱讀。第13章介紹Flutter插件開發。這需要具備原生開發的知識，比如Java、Objective-C等相關知識。如果讀者不需要開發插件可以略過。第14～16章實操性很強，讀者只要根據書中的步驟仔細操作，就能快速掌握。 #### 關于隨書代碼 本書所列代碼力求完整，但由于篇幅所限，代碼沒有全放在書里。完整代碼在以下網址： <http://www.flutter100.net> <https://github.com/kangshaojun> #### 致謝 首先感謝機械工業出版社吳怡編輯的耐心指點，以及推動了本書的出版。 感謝朋友段偉偉工程師，江湖人稱“魚老大”，國內骨灰級WebRTC開發者、視頻會議產品合作者。在這里感謝魚老大的技術分享及幫助。 感謝陳波及陳志紅兩位好友。在本書交稿壓力最大的時侯，從內容安排及語言潤色方面，都提供了一些非常有用的建議。還感謝高文翠老師對本書大綱的指導。 最后還要感謝我的家人。感謝我的母親及妻子，在我寫作過程中承擔了全部的家務并照顧小孩兒，使我可以全身心地投入寫作工作。在寫作那段時間，正好家里閣樓裝修，感謝我的父親，他親自管理裝修工程，幫我節省了很多時間和精力。我愛你們，和你們在一起是幸運的事情！ 亢少軍 2018年12月7日