現(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à)。本章將分類介紹這些組件。
第6章介紹Cupertino風(fēng)格的組件,這是一類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ǔ)類的使用。通過(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)。
如果你正在使用類似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章專門(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章專門(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日
第2版前言
第1章 開(kāi)啟Flutter之旅 1
1.1 Flutter的特點(diǎn)與核心概念 1
1.1.1 一切皆為組件 2
1.1.2 組件嵌套 2
1.1.3 構(gòu)建 3
1.1.4 處理用戶交互 3
1.1.5 狀態(tài) 4
1.1.6 分層的框架 5
1.2 搭建開(kāi)發(fā)環(huán)境 6
1.2.1 Windows環(huán)境搭建 6
1.2.2 MacOS環(huán)境搭建 12
1.3 寫(xiě)第一個(gè)Flutter程序 16
第2章 Flutter基礎(chǔ)知識(shí) 22
2.1 入口程序 22
2.2 Material Design設(shè)計(jì)風(fēng)格 23
2.3 Flutter主題 23
2.3.1 創(chuàng)建應(yīng)用主題 23
2.3.2 局部主題 25
2.3.3 使用主題 26
2.4 使用包資源 27
2.5 狀態(tài)管理 31
2.5.1 有狀態(tài)及無(wú)狀態(tài)組件 31
2.5.2 Provider的使用 33
2.6 HTTP請(qǐng)求 36
2.6.1 HTTP請(qǐng)求方式 37
2.6.2 HttpClient請(qǐng)求方式 38
2.6.3 Dio請(qǐng)求方式 39
第3章 Dart語(yǔ)言簡(jiǎn)述 47
3.1 Dart的重要概念與常用開(kāi)發(fā)庫(kù) 47
3.2 變量與基本數(shù)據(jù)類型 50
3.3 函數(shù) 52
3.4 運(yùn)算符 54
3.5 流程控制語(yǔ)句 58
3.6 異常處理 61
3.7 面向?qū)ο?62
3.7.1 實(shí)例化成員變量 62
3.7.2 構(gòu)造函數(shù) 63
3.7.3 讀取和寫(xiě)入對(duì)象 64
3.7.4 重載操作 65
3.7.5 繼承類 66
3.7.6 抽象類 67
3.7.7 枚舉類型 68
3.7.8 Mixins 69
3.8 泛型 69
3.9 庫(kù)的使用 70
3.10 異步支持 71
3.11 元數(shù)據(jù) 71
3.12 注釋 73
第4章 常用組件 75
4.1 容器組件 75
4.2 圖片組件 77
4.3 文本組件 79
4.4 圖標(biāo)及按鈕組件 81
4.4.1 圖標(biāo)組件 81
4.4.2 圖標(biāo)按鈕組件 82
4.4.3 凸起按鈕組件 83
4.5 列表組件 84
4.5.1 基礎(chǔ)列表組件 85
4.5.2 水平列表組件 86
4.5.3 長(zhǎng)列表組件 88
4.5.4 網(wǎng)格列表組件 89
4.6 表單組件 90
第5章 Material Design風(fēng)格組件 94
5.1 App結(jié)構(gòu)和導(dǎo)航組件 95
5.1.1 MaterialApp(應(yīng)用組件) 95
5.1.2 Scaffold(腳手架組件) 99
5.1.3 AppBar(應(yīng)用按鈕組件) 101
5.1.4 BottomNavigationBar(底部導(dǎo)航條組件) 103
5.1.5 TabBar(水平選項(xiàng)卡及視圖組件) 104
5.1.6 Drawer(抽屜組件) 110
5.2 按鈕和提示組件 112
5.2.1 FloatingActionButton(懸停按鈕組件) 112
5.2.2 FlatButton(扁平按鈕組件) 114
5.2.3 PopupMenuButton(彈出菜單組件) 115
5.2.4 SimpleDialog(簡(jiǎn)單對(duì)話框組件) 117
5.2.5 AlertDialog(提示對(duì)話框組件) 118
5.2.6 SnackBar(輕量提示組件) 120
5.3 其他組件 121
5.3.1 TextField(文本框組件) 121
5.3.2 Card(卡片組件) 123
第6章 Cupertino風(fēng)格組件 126
6.1 CupertinoActivityIndicator(加載指示器組件) 126
6.2 CupertinoAlertDialog(對(duì)話框組件) 127
6.3 CupertinoButton(按鈕組件) 128
6.4 Cupertino(導(dǎo)航組件集) 129
第7章 頁(yè)面布局 135
7.1 基礎(chǔ)布局處理 136
7.1.1 Container(容器布局) 136
7.1.2 Center(居中布局) 139
7.1.3 Padding(填充布局) 140
7.1.4 Align(對(duì)齊布局) 142
7.1.5 Row(水平布局) 144
7.1.6 Column(垂直布局) 145
7.1.7 FittedBox(縮放布局) 147
7.1.8 Stack/Alignment 150
7.1.9 Stack/Positioned 152
7.1.10 IndexedStack 154
7.1.11 OverflowBox(溢出父容器顯示) 155
7.2 寬高尺寸處理 157
7.2.1 SizedBox(設(shè)置具體尺寸) 157
7.2.2 ConstrainedBox(限定最大最小寬高布局) 158
7.2.3 LimitedBox(限定最大寬高布局) 159
7.2.4 AspectRatio(調(diào)整寬高比) 161
7.2.5 FractionallySizedBox(百分比布局) 162
7.3 列表及表格布局 163
7.3.1 ListView 163
7.3.2 GridView 166
7.3.3 Table 167
7.4 其他布局處理 169
7.4.1 Transform(矩陣轉(zhuǎn)換) 169
7.4.2 Baseline(基準(zhǔn)線布局) 171
7.4.3 Offstage(控制是否顯示組件) 172
7.4.4 Wrap(按寬高自動(dòng)換行布局) 174
7.5 布局綜合示例 176
7.5.1 布局分析 176
7.5.2 準(zhǔn)備素材 177
7.5.3 編寫(xiě)代碼 178
第8章 手勢(shì) 184
8.1 用GestureDetector進(jìn)行手勢(shì)檢測(cè) 184
8.2 用Dismissible實(shí)現(xiàn)滑動(dòng)刪除 186
第9章 資源和圖片 189
9.1 添加資源和圖片 189
9.1.1 指定asset 189
9.1.2 加載asset 190
9.1.3 平臺(tái)asset 192
9.2 自定義字體 194
第10章 組件裝飾和視覺(jué)效果 196
10.1 Opacity(透明度處理) 196
10.2 DecoratedBox(裝飾盒子) 197
10.3 RotatedBox(旋轉(zhuǎn)盒子) 204
10.4 Clip(剪裁處理) 205
10.5 案例自定義畫(huà)板 209
第11章 路由和持久化 227
11.1 路由的基本應(yīng)用 227
11.2 Fluro企業(yè)級(jí)路由 235
11.3 Key-Value存儲(chǔ)簡(jiǎn)介 240
11.3.1 shared_preferences的應(yīng)用 241
11.3.2 shared_preferences的實(shí)現(xiàn)原理 244
11.4 文件存儲(chǔ) 246
11.5 Sqflite的應(yīng)用 249
11.5.1 常用操作方法 249
11.5.2 客戶表操作示例 251
第12章 動(dòng)畫(huà) 256
12.1 動(dòng)畫(huà)的基本概念 256
12.2 Flutter的動(dòng)畫(huà)相關(guān)類 257
12.2.1 Animation簡(jiǎn)介 258
12.2.2 AnimationController(動(dòng)畫(huà)管理類) 258
12.2.3 CurvedAnimation(非線性動(dòng)畫(huà)類) 259
12.2.4 Tween(補(bǔ)間值生成類) 260
12.2.5 Listeners和StatusListeners(動(dòng)畫(huà)監(jiān)聽(tīng)類) 261
12.2.6 動(dòng)畫(huà)控制流程 262
12.3 動(dòng)畫(huà)示例 262
12.3.1 字體放大動(dòng)畫(huà) 262
12.3.2 緩動(dòng)動(dòng)畫(huà) 266
12.3.3 遮罩動(dòng)畫(huà) 269
12.3.4 數(shù)字變化動(dòng)畫(huà) 272
12.3.5 圖表動(dòng)畫(huà) 274
12.4 動(dòng)畫(huà)組件 277
12.4.1 用AnimatedOpacity實(shí)現(xiàn)漸變效果 277
12.4.2 用Hero實(shí)現(xiàn)頁(yè)面切換動(dòng)畫(huà) 279
第13章 Flutter插件開(kāi)發(fā) 282
13.1 獲取系統(tǒng)版本插件 282
13.1.1 新建插件 282
13.1.2 運(yùn)行插件 285
13.1.3 示例代碼分析 286
13.2 電池電量插件 293
13.2.1 新建插件 293
13.2.2 插件上層處理 293
13.2.3 Android原生層處理 295
13.2.4 iOS原生層處理 300
13.2.5 測(cè)試插件 304
13.3 Channel詳解 308
13.3.1 通道名稱 309
13.3.2 通信工具BinaryMessager 309
13.3.3 消息編解碼器Codec 309
13.3.4 消息處理器Handler 310
13.4 PlatformView顯示原生視圖 311
13.4.1 新建插件 311
13.4.2 插件上層處理 311
13.4.3 Android原生層處理 314
13.4.4 iOS原生層處理 317
13.4.5 測(cè)試插件 321
第14章 開(kāi)發(fā)工具及使用技巧 324
14.1 IDE集成開(kāi)發(fā)環(huán)境 324
14.1.1 Android Studio / IntelliJ 324
14.1.2 Visual Studio Code 330
14.2 Flutter SDK 337
14.3 使用熱重載 338
14.4 格式化代碼 339
14.5 Flutter組件檢查器 340
第15章 測(cè)試與發(fā)布應(yīng)用 343
15.1 測(cè)試應(yīng)用 343
15.1.1 簡(jiǎn)介 343
15.1.2 單元測(cè)試 344
15.1.3 Widget測(cè)試 345
15.1.4 集成測(cè)試 346
15.2 發(fā)布Android版App 348
15.2.1 檢查App Manifest 348
15.2.2 查看構(gòu)建配置 349
15.2.3 添加啟動(dòng)圖標(biāo) 350
15.2.4 App簽名 350
15.2.5 構(gòu)建發(fā)布版APK并安裝在設(shè)備上 353
15.3 發(fā)布iOS版App 353
15.3.1 準(zhǔn)備工作 353
15.3.2 在iTunes Connect上注冊(cè)應(yīng)用程序 353
15.3.3 注冊(cè)一個(gè)Bundle ID 354
15.3.4 在iTunes Connect上創(chuàng)建應(yīng)用程序記錄 355
15.3.5 查看Xcode項(xiàng)目設(shè)置 355
15.3.6 添加應(yīng)用程序圖標(biāo) 356
15.3.7 準(zhǔn)備發(fā)布版本 358
15.3.8 將應(yīng)用發(fā)布到App Store 360
第16章 綜合案例 362
16.1 即時(shí)通信App界面實(shí)現(xiàn) 362
16.1.1 項(xiàng)目介紹 362
16.1.2 項(xiàng)目搭建 363
16.1.3 入口程序 366
16.1.4 加載頁(yè)面 367
16.1.5 應(yīng)用頁(yè)面 368
16.1.6 搜索頁(yè)面 375
16.1.7 聊天頁(yè)面 379
16.1.8 好友頁(yè)面 383
16.1.9 我的頁(yè)面 390
16.2 企業(yè)站App實(shí)現(xiàn) 394
16.2.1 項(xiàng)目介紹 394
16.2.2 項(xiàng)目搭建 396
16.2.3 入口程序 399
16.2.4 加載頁(yè)面 401
16.2.5 工具及配置文件處理 402
16.2.6 Fluro路由處理 404
16.2.7 Dio請(qǐng)求方法封裝 405
16.2.8 索引頁(yè)面 406
16.2.9 首頁(yè) 410
16.2.10 首頁(yè)輪播圖 411
16.2.11 首頁(yè)最新產(chǎn)品列表 412
16.2.12 產(chǎn)品頁(yè)面 419
16.2.13 產(chǎn)品詳情頁(yè)面 423
16.2.14 聯(lián)系我們頁(yè)面 428