現(xiàn)在,主流的移動開發(fā)平臺是Android和iOS,每個平臺上的開發(fā)技術(shù)不太一樣,針對每個平臺開發(fā)應(yīng)用需要特定的人員,但這樣一來開發(fā)效率會變得低下,因而需要進行跨平臺開發(fā)。跨平臺技術(shù)從最開始的Hybrid混合開發(fā)技術(shù),到React Native的橋接技術(shù),一直在演進。
Hybrid開發(fā)主要依賴于WebView,但WebView是一個重量級的控件,很容易產(chǎn)生內(nèi)存問題,而且復(fù)雜的UI在WebView上顯示的性能不好。React Native技術(shù)拋開了WebView,利用JavaScript Core來做橋接,將JavaScript調(diào)用轉(zhuǎn)為Native調(diào)用。React Native最終會生成對應(yīng)的自定義原生控件。這種策略將框架本身和App開發(fā)者捆綁在系統(tǒng)的控件上,不僅框架本身需要處理大量平臺相關(guān)的邏輯,隨著系統(tǒng)版本變化和API的變化,開發(fā)者可能也需要處理不同平臺間的差異,甚至有些特性只能在部分平臺上實現(xiàn),這使得跨平臺特性大打折扣。
Flutter是最新的跨平臺開發(fā)技術(shù),可以橫跨Android、iOS、MacOS、Windows、Linux等多個系統(tǒng),還可以打包成Web程序運行在瀏覽器上。Flutter采用了更為徹底的跨平臺方案,即自己實現(xiàn)了一套UI框架,然后直接在GPU上渲染UI頁面。
筆者最早接觸的跨平臺技術(shù)是Adobe Air,寫一套Action Script代碼可以運行在PC、Android及iOS三大平臺上。筆者與朋友開發(fā)視頻會議產(chǎn)品,需要最大化地減少前端的開發(fā)及維護工作量,所以,我們先后考察過Cordova、React Native及Flutter等技術(shù)。我們覺得Flutter方案更加先進,效率更高,后來就嘗試用Flutter開發(fā)了開源的WebRTC插件(可在GitHub上搜索Flutter WebRTC)。
寫作本書的目的是傳播Flutter知識(因為Flutter確實優(yōu)秀),想在為Flutter社區(qū)做貢獻的同時也為我們的產(chǎn)品打下堅實的技術(shù)基礎(chǔ)。在寫作本書的過程中,筆者查閱了大量的資料,使得知識體系擴大了不少,收獲良多。
本書主要內(nèi)容
第1章介紹Flutter的基本概念、狀態(tài)生命周期、Flutter框架,并寫第一個Flutter程序,來感受一下Flutter之美。
第2章介紹幾個重要知識點,如入口程序、Material Design設(shè)計風(fēng)格、Flutter主題、使用包資源、狀態(tài)管理Provider使用、Http請求處理、Dio庫的使用以及Json與數(shù)據(jù)模型處理。
第3章簡單介紹Dart語言。Dart語言是Flutter SDK指定的語言,我們很有必要補充一下它的基礎(chǔ)知識,包括語法特性、基本語句、面向?qū)ο蟮取?/p>
第4章介紹常用組件。Flutter里有一個非常重要的核心理念:一切皆為組件,本章主要講解開發(fā)中用得最頻繁的組件,如容器組件、圖片組件、文本組件、圖標(biāo)組件和表單組件等。
第5章介紹Material Design風(fēng)格的組件。Material Design風(fēng)格是一種非常有質(zhì)感的設(shè)計風(fēng)格,并提供一些默認的交互動畫。本章將分類介紹這些組件。
第6章介紹Cupertino風(fēng)格的組件,這是一類iOS風(fēng)格的組件,如CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。
第7章介紹頁面布局的基礎(chǔ)知識和技巧,如基礎(chǔ)布局處理、寬高尺寸處理、列表及表格布局等,最后通過一個綜合布局示例來演示如何編寫復(fù)雜的頁面。
第8章介紹如何處理手勢,如輕擊、拖動和縮放等。Flutter中提供GestureDetector進行手勢檢測,并為手勢檢測提供了相應(yīng)的監(jiān)聽。
第9章介紹如何加載、處理、展示資源和圖片,如添加資源和圖片、自定義字體等。
第10章介紹組件裝飾和視覺效果的處理,如Opacity(透明度處理)、DecoratedBox(裝飾盒子)、RotatedBox(旋轉(zhuǎn)盒子)、Clip(剪裁處理)和CustomPainter(自定義畫板)。
第11章介紹Flutter原生路由導(dǎo)航處理、Fluro企業(yè)級路由導(dǎo)航處理,還介紹了Key-Value(鍵值對)存儲、文件存儲以及Sqf?lite等持久化操作。
第12章介紹動畫的基本概念和原理,以及Flutter動畫基礎(chǔ)類的使用。通過字體放大動畫、緩動動畫、遮罩動畫等示例詳細介紹如何自定義動畫。
第13章介紹Flutter插件開發(fā)的入門知識。Flutter插件可以和原生程序交互,比如調(diào)用藍牙、啟用WiFi、打開手電筒,等等。通過獲取系統(tǒng)版本及電池電量插件的示例詳細介紹了插件的基本開發(fā)步驟。通過加載網(wǎng)頁插件示例詳細介紹了Flutter與原生視圖集成的方法。
第14章介紹開發(fā)工具及使用技巧,并介紹了幾款常用的IDE工具,從代碼的編寫、輔助功能、程序調(diào)試、性能分析等多方面講解工具及使用技巧。
第15章介紹測試與發(fā)布應(yīng)用,包括測試應(yīng)用、發(fā)布Android版和iOS版App。
第16章以實戰(zhàn)案例為主。第一個綜合案例介紹如何使用Flutter實現(xiàn)即時通信App的界面。第二個綜合案例是實現(xiàn)一個企業(yè)站App,綜合運用了前面的Flutter組件、布局、網(wǎng)絡(luò)請求、Json處理、數(shù)據(jù)展示、狀態(tài)管理、路由導(dǎo)航以及WebSocket等知識。
閱讀建議
本書是一本基礎(chǔ)入門加實戰(zhàn)的書籍,既有基礎(chǔ)知識,又有豐富的示例,包括詳細的操作步驟,實操性強。由于Flutter大量使用組件,所以本書對組件的講解很詳細,包括基本概念、屬性及代碼示例。每個組件都配有小例子,力求精簡,還提供了配套網(wǎng)站以提供完整代碼,復(fù)制完整代碼就可以看到效果,這樣會增強讀者的信心,在輕松掌握基礎(chǔ)知識的同時快速進入實戰(zhàn)。
如果你正在使用類似React Native等跨平臺技術(shù),那么學(xué)習(xí)Flutter會輕松很多。使用Flutter構(gòu)建應(yīng)用時,需要用到Android和iOS的相關(guān)知識,因為Flutter依賴移動操作系統(tǒng)提供眾多功能和配置。Flutter是一種為移動設(shè)備構(gòu)建用戶界面的新方式,但它有一個插件機制可與Android和iOS進行數(shù)據(jù)及任務(wù)通信。本書第13章專門講解Flutter的插件開發(fā)技術(shù),可以作為進一步學(xué)習(xí)的起點。
Flutter引用了大量Web開發(fā)的知識,比如FlexBox布局方式、盒模型等,這些都引用了CSS中的一些思想。所以從UI界面的實現(xiàn)角度來說,只需要熟悉Dart語言就能輕松上手Flutter。本書第3章專門介紹Dart語言的基礎(chǔ)知識。
建議讀者在一開始先把第1~3章介紹的基礎(chǔ)理論通讀一遍,到第4章時實際操作并運行每個例子,這樣就能開發(fā)最簡單的Flutter界面了。
第5章和第6章通讀即可。第7章介紹的構(gòu)建頁面布局都是開發(fā)中常用的布局方法,建議讀者仔細閱讀、實際操作并運行每個例子,尤其是最后的布局綜合例子,按步驟執(zhí)行一遍,就能理解布局的思路。
第8~11章涵蓋Flutter的高級用法,在開發(fā)中也經(jīng)常使用?梢愿鶕(jù)實際項目開發(fā)和學(xué)習(xí)的需要閱讀。
第12章介紹Flutter動畫開發(fā)。動畫可提升用戶體驗,讀者可以先閱讀動畫的理論知識,然后嘗試自定義一個簡單動畫,最后熟悉Flutter自帶的動畫組件。
第13章介紹Flutter插件開發(fā)。這需要具備原生開發(fā)的知識,比如Java、Objective-C 等相關(guān)知識。本章對讀者的綜合編程能力要求較高,需要掌握多門語言及多平臺技術(shù)。如果讀者不需要開發(fā)插件,可以略過本章。
第14~15章實操性很強,讀者只要根據(jù)書中的步驟仔細操作,就能快速掌握。
第16章的兩個綜合案例,建議讀者按書中步驟逐步實現(xiàn),同時理解項目的代碼組織結(jié)構(gòu),這樣才能勝任實際項目的開發(fā)工作。
關(guān)于隨書代碼
本書所列代碼力求完整,但限于篇幅,書中沒有給出全部代碼。完整代碼可參見以下網(wǎng)址:
http://www.flutter100.net
https://github.com/kangshaojun
致謝
首先感謝機械工業(yè)出版社吳怡編輯耐心指點,以及推動了本書的出版。
感謝我的朋友段維偉工程師,江湖人稱魚老大,國內(nèi)骨灰級WebRTC開發(fā)者、視頻會議產(chǎn)品合作者。在這里感謝魚老大的技術(shù)分享及幫助。
感謝陳波和陳志紅兩位好友。在我交稿壓力最大的時候,他們從內(nèi)容安排及語言潤色方面都提供了一些非常有用的建議。還要感謝高文翠和黃菊華老師針對本書大綱所給出的指導(dǎo)。
最后還要感謝我的家人。感謝我的母親及妻子,在我寫作的過程中承擔(dān)了全部家務(wù)并照顧孩子,使我可以全身心地投入寫作。
亢少軍
2019年10月5日
第2版前言
第1章 開啟Flutter之旅 1
1.1 Flutter的特點與核心概念 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 搭建開發(fā)環(huán)境 6
1.2.1 Windows環(huán)境搭建 6
1.2.2 MacOS環(huán)境搭建 12
1.3 寫第一個Flutter程序 16
第2章 Flutter基礎(chǔ)知識 22
2.1 入口程序 22
2.2 Material Design設(shè)計風(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)及無狀態(tài)組件 31
2.5.2 Provider的使用 33
2.6 HTTP請求 36
2.6.1 HTTP請求方式 37
2.6.2 HttpClient請求方式 38
2.6.3 Dio請求方式 39
第3章 Dart語言簡述 47
3.1 Dart的重要概念與常用開發(fā)庫 47
3.2 變量與基本數(shù)據(jù)類型 50
3.3 函數(shù) 52
3.4 運算符 54
3.5 流程控制語句 58
3.6 異常處理 61
3.7 面向?qū)ο?62
3.7.1 實例化成員變量 62
3.7.2 構(gòu)造函數(shù) 63
3.7.3 讀取和寫入對象 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 庫的使用 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 長列表組件 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(水平選項卡及視圖組件) 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(簡單對話框組件) 117
5.2.5 AlertDialog(提示對話框組件) 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(對話框組件) 127
6.3 CupertinoButton(按鈕組件) 128
6.4 Cupertino(導(dǎo)航組件集) 129
第7章 頁面布局 135
7.1 基礎(chǔ)布局處理 136
7.1.1 Container(容器布局) 136
7.1.2 Center(居中布局) 139
7.1.3 Padding(填充布局) 140
7.1.4 Align(對齊布局) 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(按寬高自動換行布局) 174
7.5 布局綜合示例 176
7.5.1 布局分析 176
7.5.2 準(zhǔn)備素材 177
7.5.3 編寫代碼 178
第8章 手勢 184
8.1 用GestureDetector進行手勢檢測 184
8.2 用Dismissible實現(xiàn)滑動刪除 186
第9章 資源和圖片 189
9.1 添加資源和圖片 189
9.1.1 指定asset 189
9.1.2 加載asset 190
9.1.3 平臺asset 192
9.2 自定義字體 194
第10章 組件裝飾和視覺效果 196
10.1 Opacity(透明度處理) 196
10.2 DecoratedBox(裝飾盒子) 197
10.3 RotatedBox(旋轉(zhuǎn)盒子) 204
10.4 Clip(剪裁處理) 205
10.5 案例自定義畫板 209
第11章 路由和持久化 227
11.1 路由的基本應(yīng)用 227
11.2 Fluro企業(yè)級路由 235
11.3 Key-Value存儲簡介 240
11.3.1 shared_preferences的應(yīng)用 241
11.3.2 shared_preferences的實現(xiàn)原理 244
11.4 文件存儲 246
11.5 Sqflite的應(yīng)用 249
11.5.1 常用操作方法 249
11.5.2 客戶表操作示例 251
第12章 動畫 256
12.1 動畫的基本概念 256
12.2 Flutter的動畫相關(guān)類 257
12.2.1 Animation簡介 258
12.2.2 AnimationController(動畫管理類) 258
12.2.3 CurvedAnimation(非線性動畫類) 259
12.2.4 Tween(補間值生成類) 260
12.2.5 Listeners和StatusListeners(動畫監(jiān)聽類) 261
12.2.6 動畫控制流程 262
12.3 動畫示例 262
12.3.1 字體放大動畫 262
12.3.2 緩動動畫 266
12.3.3 遮罩動畫 269
12.3.4 數(shù)字變化動畫 272
12.3.5 圖表動畫 274
12.4 動畫組件 277
12.4.1 用AnimatedOpacity實現(xiàn)漸變效果 277
12.4.2 用Hero實現(xiàn)頁面切換動畫 279
第13章 Flutter插件開發(fā) 282
13.1 獲取系統(tǒng)版本插件 282
13.1.1 新建插件 282
13.1.2 運行插件 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 測試插件 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 測試插件 321
第14章 開發(fā)工具及使用技巧 324
14.1 IDE集成開發(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章 測試與發(fā)布應(yīng)用 343
15.1 測試應(yīng)用 343
15.1.1 簡介 343
15.1.2 單元測試 344
15.1.3 Widget測試 345
15.1.4 集成測試 346
15.2 發(fā)布Android版App 348
15.2.1 檢查App Manifest 348
15.2.2 查看構(gòu)建配置 349
15.2.3 添加啟動圖標(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上注冊應(yīng)用程序 353
15.3.3 注冊一個Bundle ID 354
15.3.4 在iTunes Connect上創(chuàng)建應(yīng)用程序記錄 355
15.3.5 查看Xcode項目設(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 即時通信App界面實現(xiàn) 362
16.1.1 項目介紹 362
16.1.2 項目搭建 363
16.1.3 入口程序 366
16.1.4 加載頁面 367
16.1.5 應(yīng)用頁面 368
16.1.6 搜索頁面 375
16.1.7 聊天頁面 379
16.1.8 好友頁面 383
16.1.9 我的頁面 390
16.2 企業(yè)站App實現(xiàn) 394
16.2.1 項目介紹 394
16.2.2 項目搭建 396
16.2.3 入口程序 399
16.2.4 加載頁面 401
16.2.5 工具及配置文件處理 402
16.2.6 Fluro路由處理 404
16.2.7 Dio請求方法封裝 405
16.2.8 索引頁面 406
16.2.9 首頁 410
16.2.10 首頁輪播圖 411
16.2.11 首頁最新產(chǎn)品列表 412
16.2.12 產(chǎn)品頁面 419
16.2.13 產(chǎn)品詳情頁面 423
16.2.14 聯(lián)系我們頁面 428