版權宣告：本文為博主原創文章，未經博主允許不得轉載轉載請標明出處：本文出自 AWeiLoveAndroid的部落格

---

號外：下載谷歌瀏覽器掘金外掛，搜尋Dart語言，我的github工程排名第 4 ，歡迎大家多多關注！

本文同步釋出在github,更多關於Flutter的相關內容和示例程式碼，請看我的github：

github.com/AweiLoveAnd…

---

第1章、基礎入門

1.1 Flutter簡介

1.1.1 跨平臺框架的發展歷史

這裡就以一張圖簡單的講一下：

詳情介紹請看我之前寫的部落格 安卓開發方式的進化之路

1.1.2 Flutter的起源

2015年， Google 內部開始測試另一種高效能的程式設計方式，那就 Google 的 Sky 專案。Sky 專案使用網頁開發語言Dart開發原生Android 應用，強調應用的執行速度和與 Web 的高度整合。Sky將其Web後端也帶到了移動開發領域。Sky不依賴於平臺，其程式碼可以執行在Android、iOS，或是任何包含Dart虛擬機器的平臺上。

可以說sky是Flutter框架的前身。

在 2017年的谷歌 I/O大會上，Google推出了Flutter —— 一款新的用於建立移動應用的開源庫。在2018年初世界移動大會上釋出了 Flutter的第一個Beta版本，2018年5月的 I/O大會上更新到了Beta3版本，向正式版又邁進了一步。一時間業內對這個框架的關注度越來越高。

關於sky的起源相關新聞，可以點選以下幾篇文章：

Google Sky 開源專案：不使用 JAVA 開發 120 FPS 的安卓應用

谷歌推出Sky框架：使用Dart編寫120fps的Android應用

谷歌推出全新Android開發框架Sky讓App更流暢

1.1.3 Flutter體系結構

下回分解

1.1.4 DartVM虛擬機器

下回分解

---

1.2 Flutter開發環境

1.2.1 安裝Flutter開發環境

由於內容太長，詳細的安裝過程和注意事項，請看我的部落格。Flutter從配置安裝到填坑指南詳解

→ 遇到的一些問題：

（一）解除安裝flutter相關環境

• 1. Dart的外掛安裝包在 C盤路徑： \AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org資料夾裡面 所以只需要找到Pub資料夾，刪掉Pub資料夾。
• 2. flutter原始碼檔案，就是你在github下載下來的那個專案原始碼， 比如我放在了E:\develop\flutter，我只需要把flutter這個資料夾刪除就可以了。
• 3. C盤使用者名稱下面有個.AndroidStudioXXX的資料夾，這個是AS的快取目錄， 比如我的是 C:\Users\luzhaowei.AndroidStudio2.2 開啟，找到外掛目錄 C:\Users\luzhaowei.AndroidStudio2.2\config\plugins 把裡面的Dart 和 flutter-intelliJ兩個資料夾刪掉
• 4. 把環境變數裡面的flutter和dart有關的設定刪掉。

---

（二） 解除安裝flutter之後，重新git命令安裝flutter之後，然後命令列執行flutter doctor時，會有以下錯誤（以下是我的填坑指路全過程）：

注意：由於下載的國外的網站上的資料，需要科學上網！！！

我退出命令列再執行，還是照樣出錯。

後來我想是不是BITS傳輸服務未開啟，於是我一頓操作猛如虎，操作如下，開啟BITS：

計算機 --> 右鍵 “管理” -->  服務和應用程式裡面，點選“服務”，然後如下圖所示：
複製程式碼

然後選中圖中標記的這個，右鍵點選“屬性”，然後改成自動，確定。如下圖所示：

然後我把剛下載的flutter資料夾刪掉，重新執行git命令，下載flutter。（下好了之後記得配置環境變數）然後執行flutter doctor 命令，這次好一些了，但是命令列更新的很慢，一直停留在命令列，如圖所示：

等了好久，終於出來了。

然後又是漫長的等待，在下載Material fonts這裡出錯了,於是我關掉了命令列，重新開啟命令列，執行flutter doctor命令。

然後又是失敗。。不等了，關閉命令列吧。

然後重新開啟命令列，執行flutter doctor命令。經歷了幾個小時的折騰，終於環境安裝好了！ 看到下面那個對勾，表示flutter已經更新完成了。

然後重新開啟命令列，執行flutter doctor -v命令，。看看還有什麼需要安裝的？（目前我安裝的flutter最新版是0.4.4）,如下圖所示：

新版的跟舊版的有區別，這裡的每一項裡面的小項都很詳細的列舉了類目，只要是正確安裝了IDE，以及配置了jdk,sdk環境的，都會詳細列出來。

Flutter支援Android Studio、VSCode以及 控制檯+文字編輯器 的方式。如果你還安裝了VSCode，命令列裡面也會列舉出來的。

【重點提示】按照提示來操作即可，哪個缺少（前面是 X 符號的）就配置哪一個。。一般來說，命令列會給你一些提示，比如需要使用什麼命令操作，需要在哪個路徑下面操作等。。

有3點需要特別注意的：

• 1. Flutter，這裡面有4個工具，缺一不可：Flutter本身的安裝包，Framework（這是flutter的核心程式碼部分），Engine（flutter的引擎），Dart sdk。
• 2. Android toolchain（開發Android裝置的一些工具），這裡是完整版的安裝，有7個工具：sdk（sdk路徑），ndk（ndk路徑），Platform(android-27)以及build-tools（27.0.3），給sdk路徑配置ANDROID_HOME環境變數，jdk配置路徑，jdk執行環境版本，android licenses(協議)。
• 3. Android Studio環境，包括安裝包路徑，Flutter外掛，Dart外掛，AS自帶jdk版本號。 我這裡還安裝了IDEA， 所以也會把它的環境列舉出來。

下面是安裝過程中出現的一些安裝包缺少的問題：

**↓這個 問題的原因：**是sdk環境變數沒配置，找到sdk路徑，比如我的是E:\debelop\sdk，我複製這個路徑，開啟環境變數，新建一個變數，取名為ANDROID_HOME，然後在path變數裡面最後加入;%ANDROID_HOME\%

**↓這個 問題的原因：**一些android licenses沒有同意，按上面的要求在命令列輸入flutter doctor --android-licenses，回車，然後會出現要你輸入y/n 你只要輸入y 回車就好了。

↓其他問題：基本都是開發工具的配置了，這個就不多說了，大家應該很熟悉了。

---

（三） 使用cmd執行flutter doctor報錯：無法與伺服器建立連線。

報錯如下所示：

問題排查：

首先：我在電腦屬性服務裡面開啟了BITS，這個問題已排除。 其次：我的環境配置都是沒問題的。

最後我看flutter官方安裝文件推薦使用PowerShell，於是我開啟PowerShell命令列（必須安裝5.0+版本），輸入flutter doctor，終於好了。所以為了不出奇怪的錯誤，請下載使用 PowerShell 5.0版本

---

（四） Flutter外掛不支援當前AS版本。當前的AS是3.2，我的gradle編譯的api是27的，可能Flutter目前最高只能支援26，果然我在build.gradle裡面的編譯版本改成了26，重新編譯一下，OK了。

---

（五）系統重灌了，flutter工具也是重新安裝的，由於沒有備份C盤的之前下載的三方庫，導致專案載入的時候重新載入一大堆三方庫，很卡，下載用了很長時間（需要科學上網）。

【順便說明一下三方庫使用方式】：

Flutter使用外部開源包，開啟pubspec.yaml檔案，在如下加了中文註釋之處新增依賴庫：

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  # 在這裡新增依賴庫，比這個是英文單詞的庫
  english_words：^3.1.0
  # 這個是圖片選擇的庫
  image_picker: ^0.4.1
複製程式碼

格式：庫名稱: ^庫版本號

注意：冒號是中文標點，有一些庫需要^，不要忘記^

可以在 pub.dartlang.org 上找到開源軟體包。（需要翻牆）直接新增依賴，可能會很慢，

也可以直接去https://pub.dartlang.org/packages/ 查詢想要的依賴庫，直接下載壓縮包，然後複製到以下路徑：

C:\Users\XXX\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\(使用依賴庫安裝完成後的本地路徑也是這個)，建議把這個資料夾備份，以便系統出故障之後或者重灌系統之後好還原。

---

（六）明明開啟了模擬器，可是AS就是不顯示模擬器，如下圖所示：

然後新建了一個API 26的模擬器，然後命令列視窗提示以下錯誤：

---

（七） 編譯一個demo居然安裝包是30多M，這個也太坑了吧。。安卓原生的apk包最多就幾M。但是這是debug模式下的apk包，簽名打包後的release版本的包很小，大概幾兆的樣子。

---

（八）Flutter有一個Flutter Inspector的工具，主要是檢查Widget的，可以用於診斷佈局渲染問題，檢視app當前的檢視樹結構。但是：這個檢視樹層次太深了，看起來很費勁有木有。。 詳細使用描述可以參考官網文件：doc.flutter-dev.cn/inspector/

【備註：】不同電腦檢視樹工具顯示不一樣，可能跟cpu是x86或者x64有關，另外一臺電腦就沒有這麼多層次了，用到了哪些控制元件就顯示哪些，很明確清晰。如下圖所示：

---

九、幾個相關學習網站

• Flutter原始碼github連結 github.com/flutter/flu…
• Flutter官方文件 flutter.io/docs/
• Flutter中文文件 doc.flutter-dev.cn/
• Dart語言官方主頁 www.dartlang.org/
• Dart語言中文社群 www.cndartlang.com/
• Dart中文官網 www.dart-china.org/

另外可以推薦下載nodejs和 yarn，以後使用yarn下載更新包很方便。（這個不是重點，瞭解就可以了）

• yarn官網 https://yarnpkg.com/zh-Hans/
• yarn中文網 https://yarn.bootcss.com/
• nodejs中文官網 https://nodejs.org/zh-cn/

---

1.2.2 常用的命令列

以下是常用命令：

常用命令	含義
--version	檢視Flutter版本
-h或者**--help**	列印所有命令列用法資訊
analyze	分析專案的Dart程式碼。
build	Flutter構建命令。
channel	列表或開關Flutter通道。
clean	刪除構建/目錄。
config	配置Flutter設定。
create	建立一個新的Flutter專案。
devices	列出所有連線的裝置。
doctor	展示了有關安裝工具的資訊。
drive	為當前專案執行Flutter驅動程式測試。
format	格式一個或多個Dart檔案。
fuchsia_reload	在Fuchsia上進行熱過載。
help	顯示幫助資訊的Flutter。
install	在附加裝置上安裝Flutter應用程式。
logs	顯示用於執行Flutter應用程式的日誌輸出。
packages	命令用於管理Flutter包。
precache	填充了Flutter工具的二進位制工件快取。
run	在附加裝置上執行你的Flutter應用程式。
screenshot	從一個連線的裝置截圖。
stop	停止在附加裝置上的Flutter應用。
test	對當前專案的Flutter單元測試。
trace	開始並停止跟蹤執行的Flutter應用程式。
upgrade	升級你的Flutter副本。

---

1.2.3 除錯工具

下回分解

---

1.3 開發第一個Flutter程式

1.3.1 HelloWorld案例

建立project過程和普通安卓專案是很類似的。

（一）開啟AS，點選 File --> New Flutter Project，看看3種不同型別的專案模板

解釋這三種型別的含義：

• Flutter Application（Flutter應用專案）

本文中建立的就是這種型別。具體的下面會詳解。
複製程式碼

• Flutter Plugin（Flutter外掛專案）

當我們建立了Flutter Plugin之後，發現多了一個我們自己命名的目錄，這個相當於一個本地的lib庫，
可以在` pubspec.yaml`檔案中配置路徑，然後在專案中使用。如下圖所示：
複製程式碼

• Flutter Package （Flutter包專案）

（二）開啟AS，點選 File --> New Flutter Project，選擇Flutter application ，然後點選next，輸入一個工程名字。

注意： 專案名稱必須是小寫，單詞之間用下劃線隔開，你看我這樣建立就給我提示錯誤了，報錯的如圖所示。

（三）輸入包名，點選next，點選finish，等待編譯就可以了。如果沒配置好，這個時候往往會報錯。

注意： 這裡可以支援ios和kotlin，如果需要的話可以勾上。

（四）首先模擬器，然後選擇要執行的專案，注意了，這裡有一個MainActivity 和 main.dart，選擇main.dart，然後點選綠色的三角號圖示執行（或者點選選單欄 Run）就可以了。

我用的AS3.2，我截個圖，選單欄跟以前版本有點不同，之前的AS版本可以在Build選單找到編譯選項的。

如果程式碼有更改，可以點選黃色的閃電圖示

點選它之後就可以進行熱載入。

（五）執行hello world程式

點選選單欄Run，選擇main.dart，就可以執行到模擬器了，執行效果如圖所示，上面是一個AppBar，中間是文字，右下角是一個FloatingActionButton（後文簡稱FAB），點選FAB，中間的文字數字加1：

下圖是我點選2次之後的截的圖：

1.3.2 程式結構

開啟剛才建立的程式，切換到project檢視，看看專案的結構：

【注意】 新建Flutter專案的結構和原生android的工程結構不一樣，我們不能用android那種多module 多lib的結構去建立module和lib，因為我們的程式碼都是在lib目錄裡面完成的，除非要用到原生互動的程式碼，你可以在android目錄裡面去寫，然後在lib目錄裡面去引用這些互動的程式碼。

android目錄

這裡存放的是Flutter與android原生互動的一些程式碼，這個路徑的檔案和建立單獨的Android專案的基本一樣的。不過裡面的程式碼配置跟單獨建立Android專案有些不一樣。

ios目錄

這裡存放的是Flutter與ios原生互動的一些程式碼。

lib目錄

這裡存放的是Dart語言編寫的程式碼，這裡是核心程式碼。不管是Android平臺，還是ios平臺，安裝配置好環境，可以把dart程式碼執行到對應的裝置或模擬器上面。剛才的示例中，就是執行的lib目錄下的main.dart這個檔案。 我們可以在這個lib目錄下面建立不同的資料夾，裡面存放不同的檔案，使用Dart語言寫我們的自己的程式碼。

pubspec.yaml檔案

這個是配置依賴項的檔案，比如配置遠端pub倉庫的依賴庫，或者指定本地資源（圖片、字型、音訊、視訊等）。 例如剛才建立的專案的pubspec.yaml裡面的：cupertino_icons: ^0.1.2，表示專案要依賴cupertino_icons這個庫，版本號為0.1.2。

下載的三方庫存放在C盤，路徑為：C:\Users\使用者名稱\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\XXX 注意：這個使用者名稱對應的是你電腦的使用者名稱，比如我的是Administrator，有的人是admin，看你自己的電腦的設定了。後面那個XXX就是你想藥查詢的對應的庫的名字了。（AppData是一個隱藏目錄，需要先設定顯示隱藏檔案才可以看到）下面給一張截圖示例一下：

1.3.3 打包過程

（1）建立keystore證照

如果您已經建立過證照則可以跳過這一步。若要建立新的證照，請在命令列中執行如下命令：

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

注意: keytool命令可能並不存在於您的系統環境路徑中。 它是Java JDK 的一部分，當您安裝Android Studio時會被一起安裝。 您可以通過執行flutter doctor命令，檢視Java binary at: 後輸出的路徑來確定命令所在的路徑，然後將全路徑中最後的java替換成 keytool來執行該命令。

（2）在應用中引用keystore證照

建立一個包含了keystore證照引用的配置檔案並命名為 /android/key.properties :

storePassword=<上一步中輸入的 store 密碼>
keyPassword=<上一步中輸入的 key 密碼>
keyAlias=key
storeFile=<keystore 檔案的位置， 例如： /Users/<user name>/key.jks>
複製程式碼

（3）在 gradle 中配置簽名選項

編輯您應用的 /android/app/build.gradle 檔案以配置簽名選項:

1.找到android {，然後替換為您包含證照引用的配置檔案:

def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

android {
複製程式碼

2.替換:

buildTypes {
    release {
        // TODO: Add your own signing config for the release build.
        // Signing with the debug keys for now, so `flutter run --release` works.
        signingConfig signingConfigs.debug
    }
}
複製程式碼

為如下內容:

signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}
buildTypes {
    release {
        signingConfig signingConfigs.release
    }
}
複製程式碼

（4）構建 release 版應用

在命令列使用:

cd <app dir> (用您應用工程的根目錄替換<app dir> )。

執行flutter build apk (flutter build命令預設使用--release)。

您應用的release版本的APK會生成在<app dir>/build/app/outputs/apk/app-release.apk

（5）將 release 版本的 APK 安裝到裝置上

使用命令列命令:

使用USB將Android裝置連線到您的計算機。 cd <app dir> (進入您應用工程的根目錄)。 執行 flutter install