決勝Flutter 第一章 熟悉戰場

歡迎參加「決勝Flutter」 實訓課程，這裏是你這次實訓之旅的起點。

本章將帶您快速瞭解移動開發的現狀，而後向您介紹Flutter的發展歷史以及優點特色，最後一塊兒動手，搭建高效的開發環境。

因爲Flutter 跨平臺（同時支持Android、iOS、Web以及PC）的特性，本書將以Mac OS做爲操做系統環境，版本號爲10.14。若是讀者使用的是Windows或者Linux，請結合Flutter官方網站的配置指導進行操做。須要指出的是，Windows和Linux是沒法編譯生成iOS版本App的。

好了，閒話很少說，咱們立刻進入正題！

1.1    移動開發的現狀

今天，咱們不得不認可，移動互聯網的出現和興起，給咱們的生活和社交帶來了史無前例的改變。一部小小的手機不只是通訊的工具，更有着平常生活、移動辦公、社交網絡等實用工具的屬性，已經成爲大部分人可信賴的「夥伴」，不斷衝擊着報紙、廣播、電視等傳統媒體。

事實上，移動互聯網發展得如此迅速，操做系統只提供了「平臺」，更多得益於其豐富的App生態。也正是由於這樣的緣由，誕生了一個又一個爆款App。在這些爆款的背後，則是無數的UI/UE設計師、軟件工程師、測試工程師等幕後英雄的貢獻。

同時，隨着移動互聯網的高速發展，移動App的開發模式也在快速更迭中發展。

最初，爲了可以在不一樣系統環境上運行，一般要求開發團隊進行多平臺並行開發。一般，開發Android和iOS App一共須要兩個開發團隊，維護兩套源代碼，分別進行測試。

後來，人們逐漸意識到，這樣的開發效率並不高，成本卻不低。所以誕生了一個接一個的跨平臺解決方案。好比React Native、PhoneGap、DCloud等等。但無一例外地，它們都沒法擺脫低性能的JavaScript或者原生代碼依賴，或多或少地存在不足，某些知名的App技術團隊已經宣佈棄用它們。

亟需一個真正可以打通多平臺且高性能的框架來「救場」，Flutter則應運而生。能夠說，Flutter的出現有必定的「必然性」。

1.2 初識 Flutter 

先讓咱們和Flutter這個新夥伴說聲「你好」，而後瞭解一下這位新夥伴吧！

1.2.1 Flutter 的歷史

說到Flutter的誕生，要追溯到2014年。一開始，它被叫作Sky，同年10月在GitHub上開源。一年後，Sky正式改名爲Flutter。首次對外公佈Flutter是在2017年5月的Google I/O大會上，今後，Flutter正式進入你們的視野，當時的版本號是Alpha 0.0.6。2018年2月，發佈了Flutter 1.0測試版，即Beta1。同年6月份發佈預覽版，即Preview版本。12月發佈1.0正式版。2019年2月，在1.2版本中，首次增長了對Web的支持。

截至目前，GitHub上的Flutter SDK已經有201個發佈版本，超過15000屢次代碼提交，400多位知名工程師參與其中，其問題的響應速度和處理效率一樣很是之迅速……這些都奠基了Flutter終將成爲開發者趁心如意的開發框架。

1.2.2 Flutter 的特性

那麼，Flutter 究竟有哪些特性呢？抑或是有哪些優勢呢？

l  統一的應用開發體驗：Flutter擁有豐富的庫，幫助開發者快速實現項目需求。同時，大部分的工具和庫同時支持Android和iOS；

l  快速開發：得益於Flutter框架「熱重載」的特性，能夠幫助開發者更高效地進行開發和測試，更利於修復Bug；

l  界面生動：Flutter支持跨平臺開發，一樣支持Material Design（原生Android設計語言）和Cupertino（原生iOS設計語言）風格的控件。開發者可根據設計須要實現不一樣風格的UI界面；

l  原生性能：不管在Android仍是iOS環境中，Flutter能夠提供與原生應用同樣的性能，甚至支持120 HZ的高刷新率；

l  響應式框架：Flutter支持響應式框架，在某些場景下，開發者無需付出任何代價，便可完成不一樣屏幕的適配，使UI的構建更加輕鬆；

l  混合開發：Flutter能夠與平臺原生代碼相結合，支持較新的Kotlin和Swift開發語言。藉助該特性，能夠輕鬆訪問Android或iOS上的原生系統功能和系統API。

到目前爲止，Flutter已經廣爲接受，某些知名廠商已經推出了本身的Flutter App，好比中國的阿里巴巴、騰訊、京東等等。在Flutter官方網站的Showcase頁面中，能夠找到不少使用Flutter框架開發出的知名產品。

圖1.1 使用Flutter框架的App

1.2.3 Flutter 的體系結構

Flutter框架採用的是「分層結構」。每一層都創建在另外一層的基礎上，以下圖所示：

圖1.2 Flutter框架結構

顯而易見地，整個Flutter框架由三層組成，從上到下分別是Framework（框架）層、Engine（引擎）層以及Embedder（嵌入）層。

l  框架層：框架層由Dart編程語言實現，涵蓋了界面組件、動畫、手勢等等；

l  引擎層：引擎層由C/C++編程語言實現，涵蓋了Skia、Dart和Text：

Skia：負責處理圖形，它是一個開源的圖形庫，自身提供了適用於不一樣軟硬件平臺的API。Flutter框架直接使用Skia引擎來渲染組件，既擺脫了對傳統瀏覽器的依賴，又擺脫了平臺原生控件；

Dart：包括Dart運行時環境、垃圾收集、JIT/AOT編譯等和Dart相關的支持。通過AOT靜態編譯的代碼可以使用本機指令集運行，從而確保了Flutter App可以和原生App一致的性能；

Text：負責文本渲染；

l  嵌入層：嵌入層能夠理解爲「兼容層」。正是嵌入層的出現，才確保了Flutter App能夠在不一樣的平臺上運行，該層實現了平臺無關性。

到此，是否是有點躍躍欲試，想不想親手開發出一款Flutter App呢？

不如立刻行動，讓Flutter App在設備上跑起來！

1.3 搭建 Flutter 開發環境

動手時間到！第一次，咱們先來完成「教學關卡」——配置開發環境。

中國有句古話：「工欲善其事，必先利其器。」沒有順手的工具是不行的。經過這一節的學習和實踐，相信每位讀者都能有一把「開發利器」。

讓咱們開始吧！

1.3.1 Java 開發環境的安裝與配置

配置Java開發環境的目的是爲了讓咱們的電腦能夠編譯Android應用程序。

和安裝其餘軟件相似地，在Mac OS上配置Java開發環境很是簡單。只需下載對應的安裝包文件，而後啓動安裝便可。Java 開發工具包能夠在Oracle官方網站找到，而後下載對應版本便可。這裏推薦你們安裝JDK 8版本。

圖1.3 Java開發工具包下載頁面

下載好後啓動安裝，片刻等待，進度條滿即宣告安裝結束。

圖1.4 安裝Java開發工具包

以後，能夠啓動終端，在終端窗口中鍵入

java –version

並回車。能正常輸出Java版本信息則代表安裝配置無誤。

圖1.5 Java版本信息

1.3.2 Android 開發環境的安裝與配置

接下來配置Android開發環境，咱們將使用Android Studio做爲集成開發環境（也稱爲IDE）。

首先，咱們到Android開發者網站下載Android Studio安裝包文件。和前文中所述的Java開發工具包相似，下載後安裝便可完成配置過程。

圖1.6 Android Studio 下載頁面

當咱們點擊「DOWNLOAD ANDROID STUDIO」按鈕後，網頁會自動識別當前系統並下載最合適的版本。

圖1.7 Android Studio的安裝

一般，Android Studio的安裝會比Java開發工具包的安裝更耗時。靜候進度條滿，咱們即可以啓動Android Studio了。

首次啓動會彈出嚮導，這個嚮導會指引咱們對IDE進行初步配置，並下載缺失的SDK。

圖1.8 Android SDK的下載

須要注意的是，經過首次啓動向導下載的SDK，默認只包含了最新版本的內容。若是讀者要下載更多的SDK版本，便於往後開發，能夠在啓動Android Studio後，進入Settings（設置），並查找SDK Manager（SDK管理器）。在這裏能夠下載到Android SDK全部的內容。

接下來，讓咱們爲Android Studio添加編譯Flutter App的能力。

進入Settings（設置），而後查找Plugin（插件），在上方的搜索框中鍵入flutter，並回車。以下圖所示：

圖1.9 Flutter 插件安裝

點擊INSTALL（安裝），會提示安裝Dart，點擊YES（是）繼續。安裝完成後，從新啓動Android Studio。啓動界面上已經能夠看到新建Flutter 工程的入口了：

圖1.10 新建Flutter工程入口

最後，往後方便地使用adb等命令，還須要把Android SDK的路徑加入到環境變量中。啓動終端窗口，輸入

sudo vi ~/.bash_profile

並回車，開始編輯用戶級環境變量。在文件的末尾添加以下內容：

ANDROID_HOME=/Users/wenhan/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/platform-tools

保存，而後退出vi編輯器。最後，輸入：

source ~/.bash_profile

而後回車，使環境變量當即生效。測試一下adb命令，正常狀況將會出現adb使用說明文檔。

1.3.3 iOS 開發環境的安裝配置

在Mac OS中配置iOS開發環境再簡單不過了，只要啓動Mac上的App Store，而後搜索Xcode，安裝便可。這一步驟可能會耗時很長，在安裝時還有可能表現爲卡住不動，其實是安裝的內容較多致使的，須要耐心等待。

安裝好後，啓動終端，輸入

sudo xcode-select –switch /Application/Xcode.app/Contents/Developer

並回車，配置Xcode命令行工具。

最後，輸入

sudo xcodebuild –license

並回車，接受許可協議。

1.3.4 其餘系統必備組件的安裝與配置

1.3.4.1 檢查系統必備命令行工具

除了上述IDE的配置外，Flutter還依賴某些命令行工具，才能成功完成編譯。這些工具包括：

l  bash

l  curl

l  git 2.x

l  mkdir

l  rm

l  unzip

l  which

好消息是，Mac OS系統自己已經內置了上述命令，咱們僅需確認這些命令可否正常運做便可。

1.3.4.2 設置Flutter Pub鏡像站

此外，因爲Flutter服務器在國內訪問可能出現不穩定的現象，咱們須要添加兩對環境變量，將Flutter包管理網站指向國內的鏡像站。該鏡像站由GDG China管理和維護，所以無需擔憂安全性問題。還記得環境變量的配置方法嗎？嘗試添加以下兩對值：

PUB_HOSTED_URL=https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

若是不慎忘記了配置方法，請參考1.3.2節末尾的內容，如法炮製就好。

1.3.4.3 安裝缺失的組件

對於編譯iOS App，咱們還須要安裝一些附加工具，這些附加工具被homebrew管理，它堪稱Mac OS平臺不可或缺的組件管理器。所以，咱們須要先安裝homebrew軟件包管理工具。方法是啓動終端，而後輸入以下命令後回車：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

系統會自動完成安裝。以後，依次執行下列幾條命令，完成剩餘的配置：

brew update

brew install –HEAD usbmuxd

brew link usbmuxd

brew install –HEAD libimobiledevice

brew install ideviceinstaller ios-deploy cocoapods

pod setup

1.3.4.4 安裝Visual Studio Code

在正式進行Flutter App開發前，咱們須要學習一種全新的編程語言——Dart。學習Dart編程語言無需Android Studio，也無需任何移動設備。與此相反，一款駕輕就熟的文本編輯器會更加合適，因此更推薦各位讀者使用Visual Studio Code。

Visual Studio Code一樣是跨平臺的IDE，所以不管您是使用Mac OS，Windows或者是Linux，均可以使用Visual Studio Code。

官方網站下載Visual Studio Code，運行安裝程序進行安裝，以後不要忘記安裝Flutter插件。

圖1.11 Visual Studio Code插件配置

1.3.5 Flutter 開發環境的安裝與配置

1.3.5.1 Flutter SDK的下載和配置

接下來，咱們須要下載和配置Flutter SDK。

下載Flutter SDK的方式有兩種選擇。第一種是經過Flutter官方網站提供的下載連接；第二種則是經過Git Clone（克隆）的方式下載。因爲服務器偶爾會出現鏈接不穩定的現象，所以，第二種方式最更穩妥的選擇。

啓動終端，定位到要存放Flutter SDK的目錄下，輸入：

git clone -b stable https://github.com/flutter/flutter.git

此處的stable表示要下載穩定版，也能夠改成dev來下載最新的開發版。

圖1.12 Git Clone方式下載穩定版Flutter SDK

根據網絡鏈接情況，這個過程一般會持續幾分鐘，須要耐心等待。

下載好後，別忘了配置環境變量，它能夠幫助咱們在任何位置執行flutter命令。按照前文中提過的方法，這裏只需追加PATH變量值便可，以下所示：

export PATH="$PATH:~/Development/flutter/bin"

1.3.5.2 複查全部環境變量的配置

到此，關於環境變量的配置就所有完成了，咱們回顧一下全部配置的環境變量，以下圖所示：

圖1.13 全部的環境變量配置

須要特別注意的是，上述環境變量配置的值並不是在全部電腦上都一致。請各位讀者結合自身電腦的具體狀況進行配置，並在配置後執行相應的指令測試，以確保環境配置無誤。

1.3.5.3 執行Flutter 自診斷腳本

運行終端，輸入

flutter doctor

並回車，等待診斷完成。出現下圖所示的輸出則表明配置準確無誤。

圖1.14 正確的環境配置

診斷進程結束後，會出現相似上圖的診斷報告，除了表示正確的對勾外，還可能會遇到感嘆號或者叉號。出現感嘆號表示它是一條警告，可能不會影響工程的正常編譯運行；而叉號則要引發重視了，它表示一種錯誤。不進行處理的話將會影響工程的編譯和運行。

若是不幸出現了由叉號的項目，別擔憂，您能夠在1.3.7 疑難排查小節中找到解決它們的辦法。

1.3.6 升級 Flutter SDK

因爲Flutter處在快速發展迭代中，時刻保持最新不但能夠體驗到新版本帶給咱們的新功能，並且能夠規避老版本中存在的某些問題。

當咱們按照前文所描述的方法配置好環境變量後，隨時能夠在終端執行

flutter upgrade

命令檢查並更新到最新版本的flutter SDK了。

1.3.7 疑難排查

l  git clone速度過慢甚至報錯：出現該問題，能夠嘗試訪問官網，進入SDK下載頁面，直接下載，並在完成後解壓。壓縮包內存在.git文件夾，不影響往後的版本升級；

l  出現警告（Android toolchain - develop for Android devices…）：執行

flutter doctor --android-licenses

並贊成全部的許可協議；

l  出現錯誤（Missing Xcode dependency: Python module "six"）：執行

pip install six或 sudo easy_install six或依次執行：

brew reinstall python@2

pip install six；

l  升級SDK過程當中出錯：檢查是否配置了正確的環境變量，或者直接從新下載最新版本。

1.4 首個 Flutter App——計數器

接下來，咱們建立一個計數器應用，用戶每點擊依次屏幕右下方的按鈕，屏幕中間的數值增長1，以下圖所示：

圖1.15 計數器App

計數器App是建立Flutter 工程後的默認App，咱們無需修改代碼，直接運行便可實現。

1.4.1 建立 Flutter工程

有兩種方式建立Flutter工程，第一種是經過Android Studio的新建工程嚮導；另一種是經過flutter命令行。

做者建議使用flutter 命令行建立項目，而後在Android Studio中打開。由於在網絡鏈接不穩定時，新建工程嚮導可能會致使Android Studio中止響應。

使用命令行建立項目的方法很是簡單，首先來到要存放工程代碼的目錄，而後執行：

flutter create hello_flutter

稍等片刻，便可完成工程的建立。有關flutter的更多命令行用法，將在1.4.3節中說起。

建立好工程後，啓動Android Studio，選擇「Open an existing Android Studio project」，在彈出的目錄選擇對話框中，定位到代碼所在目錄，點擊OK，便可打開工程。

圖1.16 Android Studio 工做區

怎麼樣，還算簡單吧？

1.4.2 在設備上運行 Flutter App

最後，咱們把代碼運行在設備上。您能夠選擇在電腦上啓動模擬器，或者鏈接一臺開啓了調試權限的手機。

做者建議各位使用實體設備，而非模擬器。一方面，實體設備最接近用戶最終體驗，而且更加流暢；另外一方面，某些傳感器，如NFC、藍牙等，是很難經過模擬器實現的。本書也將結合實體設備——一臺真正的手機（Android）進行講解。

啓動手機，開啓開發者選項中的USB調試，而後鏈接電腦。點擊Android Studio右上角的綠色小三角圖標，稍等片刻，像圖1.15那樣，一個簡單的flutter App就部署到手機上了。嘗試和它互動一下吧！

1.4.3 Flutter 經常使用命令

在實際開發中，咱們有必要掌握一些flutter的經常使用命令，這將幫助咱們更有效率地進行開發。

l  建立項目：

1.   flutter create my_app：以my_app爲名建立工程；

2.   flutter create -a kotlin my_app：以my_app爲名建立工程，並添加對Kotlin語言的支持；

3.   flutter create -i swift my_app：以my_app爲名建立工程，並添加對Swift語言的支持；

l  獲取工程中引用的庫：

flutter packages get

l  更新工程中引用的庫：

flutter packages upgrade

l  運行App：

flutter run：運行在默認的首選設備上；

flutter run -d 5554：運行在ID爲5554的設備上。

l  進入調試模式：

flutter attach

l  打包生成安裝文件：

flutter build apk：生成Android平臺的安裝包文件；

flutter build ios：生成iOS平臺的安裝包文件。

1.5 小結

請回顧如下幾個知識點，確保這些內容都已經瞭然於心：

 

1.   flutter的特色與優點；

2.   flutter框架的體系結構；

3.   開發flutter App的環境搭建；

4.   升級已有的flutter SDK；

5.   建立簡單的flutter App；

6.   運行flutter App在設備上；

7.   必知必會的flutter經常使用命令。

 

你可能會注意到，上述內容並未涵蓋本章的全部方面。這是由於上述的知識點是必需要掌握的，而非僅做了解。

請您確認上述內容已經徹底掌握後，再進入下一章的學習。

 

在下一章中，咱們要進行一場「特訓」，目的是讓各位讀者快速入門並掌握Dart開發語言。咱們還將結合計算機領域的某些經典算法進行強化練習，請作好準備，咱們即刻出發！