現(xiàn)在，主流的移動(dòng)開(kāi)發(fā)平臺(tái)是Android和iOS，每個(gè)平臺(tái)上的開(kāi)發(fā)技術(shù)不太一樣，針對(duì)每個(gè)平臺(tái)開(kāi)發(fā)應(yīng)用需要特定的人員，但這樣一來(lái)開(kāi)發(fā)效率會(huì)變得低下，因而需要進(jìn)行跨平臺(tái)開(kāi)發(fā)�？缙脚_(tái)技術(shù)從最開(kāi)始的Hybrid混合開(kāi)發(fā)技術(shù)，到React Native的橋接技術(shù)，一直在演進(jìn)。

Hybrid開(kāi)發(fā)主要依賴于WebView，但WebView是一個(gè)重量級(jí)的控件，很容易產(chǎn)生內(nèi)存問(wèn)題，而且復(fù)雜的UI在WebView上顯示的性能不好。React Native技術(shù)拋開(kāi)了WebView，利用JavaScript Core來(lái)做橋接，將JavaScript調(diào)用轉(zhuǎn)為Native調(diào)用。React Native最終會(huì)生成對(duì)應(yīng)的自定義原生控件。這種策略將框架本身和App開(kāi)發(fā)者捆綁在系統(tǒng)的控件上，不僅框架本身需要處理大量平臺(tái)相關(guān)的邏輯，隨著系統(tǒng)版本變化和API的變化，開(kāi)發(fā)者可能也需要處理不同平臺(tái)間的差異，甚至有些特性只能在部分平臺(tái)上實(shí)現(xiàn)，這使得跨平臺(tái)特性大打折扣。

Flutter是最新的跨平臺(tái)開(kāi)發(fā)技術(shù)，可以橫跨Android、iOS、MacOS、Windows、Linux等多個(gè)系統(tǒng)，還可以打包成Web程序運(yùn)行在瀏覽器上。Flutter采用了更為徹底的跨平臺(tái)方案，即自己實(shí)現(xiàn)了一套UI框架，然后直接在GPU上渲染UI頁(yè)面。

筆者最早接觸的跨平臺(tái)技術(shù)是Adobe Air，寫(xiě)一套Action Script代碼可以運(yùn)行在PC、Android及iOS三大平臺(tái)上。筆者與朋友開(kāi)發(fā)視頻會(huì)議產(chǎn)品，需要最大化地減少前端的開(kāi)發(fā)及維護(hù)工作量，所以，我們先后考察過(guò)Cordova、React Native及Flutter等技術(shù)。我們覺(jué)得Flutter方案更加先進(jìn)，效率更高，后來(lái)就嘗試用Flutter開(kāi)發(fā)了開(kāi)源的WebRTC插件（可在GitHub上搜索Flutter WebRTC）。

寫(xiě)作本書(shū)的目的是傳播Flutter知識(shí)（因?yàn)镕lutter確實(shí)優(yōu)秀），想在為Flutter社區(qū)做貢獻(xiàn)的同時(shí)也為我們的產(chǎn)品打下堅(jiān)實(shí)的技術(shù)基礎(chǔ)。在寫(xiě)作本書(shū)的過(guò)程中，筆者查閱了大量的資料，使得知識(shí)體系擴(kuò)大了不少，收獲良多。

本書(shū)主要內(nèi)容

第1章介紹Flutter的基本概念、狀態(tài)生命周期、Flutter框架，并寫(xiě)第一個(gè)Flutter程序，來(lái)感受一下Flutter之美。

第2章介紹幾個(gè)重要知識(shí)點(diǎn)，如入口程序、Material Design設(shè)計(jì)風(fēng)格、Flutter主題、使用包資源、狀態(tài)管理Provider使用、Http請(qǐng)求處理、Dio庫(kù)的使用以及Json與數(shù)據(jù)模型處理。

第3章簡(jiǎn)單介紹Dart語(yǔ)言。Dart語(yǔ)言是Flutter SDK指定的語(yǔ)言，我們很有必要補(bǔ)充一下它的基礎(chǔ)知識(shí)，包括語(yǔ)法特性、基本語(yǔ)句、面向?qū)ο蟮取?/p>

第4章介紹常用組件。Flutter里有一個(gè)非常重要的核心理念：一切皆為組件，本章主要講解開(kāi)發(fā)中用得最頻繁的組件，如容器組件、圖片組件、文本組件、圖標(biāo)組件和表單組件等。

第5章介紹Material Design風(fēng)格的組件。Material Design風(fēng)格是一種非常有質(zhì)感的設(shè)計(jì)風(fēng)格，并提供一些默認(rèn)的交互動(dòng)畫(huà)。本章將分類(lèi)介紹這些組件。

第6章介紹Cupertino風(fēng)格的組件，這是一類(lèi)iOS風(fēng)格的組件，如CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。

第7章介紹頁(yè)面布局的基礎(chǔ)知識(shí)和技巧，如基礎(chǔ)布局處理、寬高尺寸處理、列表及表格布局等，最后通過(guò)一個(gè)綜合布局示例來(lái)演示如何編寫(xiě)復(fù)雜的頁(yè)面。

第8章介紹如何處理手勢(shì)，如輕擊、拖動(dòng)和縮放等。Flutter中提供GestureDetector進(jìn)行手勢(shì)檢測(cè)，并為手勢(shì)檢測(cè)提供了相應(yīng)的監(jiān)聽(tīng)。

第9章介紹如何加載、處理、展示資源和圖片，如添加資源和圖片、自定義字體等。

第10章介紹組件裝飾和視覺(jué)效果的處理，如Opacity（透明度處理）、DecoratedBox（裝飾盒子）、RotatedBox（旋轉(zhuǎn)盒子）、Clip（剪裁處理）和CustomPainter（自定義畫(huà)板）。

第11章介紹Flutter原生路由導(dǎo)航處理、Fluro企業(yè)級(jí)路由導(dǎo)航處理，還介紹了Key-Value（鍵值對(duì)）存儲(chǔ)、文件存儲(chǔ)以及Sqf?lite等持久化操作。

第12章介紹動(dòng)畫(huà)的基本概念和原理，以及Flutter動(dòng)畫(huà)基礎(chǔ)類(lèi)的使用。通過(guò)字體放大動(dòng)畫(huà)、緩動(dòng)動(dòng)畫(huà)、遮罩動(dòng)畫(huà)等示例詳細(xì)介紹如何自定義動(dòng)畫(huà)。

第13章介紹Flutter插件開(kāi)發(fā)的入門(mén)知識(shí)。Flutter插件可以和原生程序交互，比如調(diào)用藍(lán)牙、啟用WiFi、打開(kāi)手電筒，等等。通過(guò)獲取系統(tǒng)版本及電池電量插件的示例詳細(xì)介紹了插件的基本開(kāi)發(fā)步驟。通過(guò)加載網(wǎng)頁(yè)插件示例詳細(xì)介紹了Flutter與原生視圖集成的方法。

第14章介紹開(kāi)發(fā)工具及使用技巧，并介紹了幾款常用的IDE工具，從代碼的編寫(xiě)、輔助功能、程序調(diào)試、性能分析等多方面講解工具及使用技巧。

第15章介紹測(cè)試與發(fā)布應(yīng)用，包括測(cè)試應(yīng)用、發(fā)布Android版和iOS版App。

第16章以實(shí)戰(zhàn)案例為主。第一個(gè)綜合案例介紹如何使用Flutter實(shí)現(xiàn)即時(shí)通信App的界面。第二個(gè)綜合案例是實(shí)現(xiàn)一個(gè)企業(yè)站App，綜合運(yùn)用了前面的Flutter組件、布局、網(wǎng)絡(luò)請(qǐng)求、Json處理、數(shù)據(jù)展示、狀態(tài)管理、路由導(dǎo)航以及WebSocket等知識(shí)。

閱讀建議

本書(shū)是一本基礎(chǔ)入門(mén)加實(shí)戰(zhàn)的書(shū)籍，既有基礎(chǔ)知識(shí)，又有豐富的示例，包括詳細(xì)的操作步驟，實(shí)操性強(qiáng)。由于Flutter大量使用組件，所以本書(shū)對(duì)組件的講解很詳細(xì)，包括基本概念、屬性及代碼示例。每個(gè)組件都配有小例子，力求精簡(jiǎn)，還提供了配套網(wǎng)站以提供完整代碼，復(fù)制完整代碼就可以看到效果，這樣會(huì)增強(qiáng)讀者的信心，在輕松掌握基礎(chǔ)知識(shí)的同時(shí)快速進(jìn)入實(shí)戰(zhàn)。

如果你正在使用類(lèi)似React Native等跨平臺(tái)技術(shù)，那么學(xué)習(xí)Flutter會(huì)輕松很多。使用Flutter構(gòu)建應(yīng)用時(shí)，需要用到Android和iOS的相關(guān)知識(shí)，因?yàn)镕lutter依賴移動(dòng)操作系統(tǒng)提供眾多功能和配置。Flutter是一種為移動(dòng)設(shè)備構(gòu)建用戶界面的新方式，但它有一個(gè)插件機(jī)制可與Android和iOS進(jìn)行數(shù)據(jù)及任務(wù)通信。本書(shū)第13章專(zhuān)門(mén)講解Flutter的插件開(kāi)發(fā)技術(shù)，可以作為進(jìn)一步學(xué)習(xí)的起點(diǎn)。

Flutter引用了大量Web開(kāi)發(fā)的知識(shí)，比如FlexBox布局方式、盒模型等，這些都引用了CSS中的一些思想。所以從UI界面的實(shí)現(xiàn)角度來(lái)說(shuō)，只需要熟悉Dart語(yǔ)言就能輕松上手Flutter。本書(shū)第3章專(zhuān)門(mén)介紹Dart語(yǔ)言的基礎(chǔ)知識(shí)。

建議讀者在一開(kāi)始先把第1～3章介紹的基礎(chǔ)理論通讀一遍，到第4章時(shí)實(shí)際操作并運(yùn)行每個(gè)例子，這樣就能開(kāi)發(fā)最簡(jiǎn)單的Flutter界面了。

第5章和第6章通讀即可。第7章介紹的構(gòu)建頁(yè)面布局都是開(kāi)發(fā)中常用的布局方法，建議讀者仔細(xì)閱讀、實(shí)際操作并運(yùn)行每個(gè)例子，尤其是最后的布局綜合例子，按步驟執(zhí)行一遍，就能理解布局的思路。

第8～11章涵蓋Flutter的高級(jí)用法，在開(kāi)發(fā)中也經(jīng)常使用。可以根據(jù)實(shí)際項(xiàng)目開(kāi)發(fā)和學(xué)習(xí)的需要閱讀。

第12章介紹Flutter動(dòng)畫(huà)開(kāi)發(fā)。動(dòng)畫(huà)可提升用戶體驗(yàn)，讀者可以先閱讀動(dòng)畫(huà)的理論知識(shí)，然后嘗試自定義一個(gè)簡(jiǎn)單動(dòng)畫(huà)，最后熟悉Flutter自帶的動(dòng)畫(huà)組件。

第13章介紹Flutter插件開(kāi)發(fā)。這需要具備原生開(kāi)發(fā)的知識(shí)，比如Java、Objective-C 等相關(guān)知識(shí)。本章對(duì)讀者的綜合編程能力要求較高，需要掌握多門(mén)語(yǔ)言及多平臺(tái)技術(shù)。如果讀者不需要開(kāi)發(fā)插件，可以略過(guò)本章。

第14～15章實(shí)操性很強(qiáng)，讀者只要根據(jù)書(shū)中的步驟仔細(xì)操作，就能快速掌握。

第16章的兩個(gè)綜合案例，建議讀者按書(shū)中步驟逐步實(shí)現(xiàn)，同時(shí)理解項(xiàng)目的代碼組織結(jié)構(gòu)，這樣才能勝任實(shí)際項(xiàng)目的開(kāi)發(fā)工作。

關(guān)于隨書(shū)代碼

本書(shū)所列代碼力求完整，但限于篇幅，書(shū)中沒(méi)有給出全部代碼。完整代碼可參見(jiàn)以下網(wǎng)址：

http://www.flutter100.net

https://github.com/kangshaojun

致謝

首先感謝機(jī)械工業(yè)出版社吳怡編輯耐心指點(diǎn)，以及推動(dòng)了本書(shū)的出版。

感謝我的朋友段維偉工程師，江湖人稱魚(yú)老大，國(guó)內(nèi)骨灰級(jí)WebRTC開(kāi)發(fā)者、視頻會(huì)議產(chǎn)品合作者。在這里感謝魚(yú)老大的技術(shù)分享及幫助。

感謝陳波和陳志紅兩位好友。在我交稿壓力最大的時(shí)候，他們從內(nèi)容安排及語(yǔ)言潤(rùn)色方面都提供了一些非常有用的建議。還要感謝高文翠和黃菊華老師針對(duì)本書(shū)大綱所給出的指導(dǎo)。

最后還要感謝我的家人。感謝我的母親及妻子，在我寫(xiě)作的過(guò)程中承擔(dān)了全部家務(wù)并照顧孩子，使我可以全身心地投入寫(xiě)作。

亢少軍

2019年10月5日