Flutter學習總結系列----Flutter基礎全面詳解

AWeiLoveAndroid發表於2018-07-04
Flutter

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

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

Flutter學習總結系列----Flutter基礎全面詳解

本文同步釋出在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資料夾。
    1. flutter原始碼檔案，就是你在github下載下來的那個專案原始碼， 比如我放在了E:\develop\flutter，我只需要把flutter這個資料夾刪除就可以了。
    1. C盤使用者名稱下面有個.AndroidStudioXXX的資料夾，這個是AS的快取目錄， 比如我的是 C:\Users\luzhaowei.AndroidStudio2.2 開啟，找到外掛目錄 C:\Users\luzhaowei.AndroidStudio2.2\config\plugins 把裡面的Dart 和 flutter-intelliJ兩個資料夾刪掉
    1. 把環境變數裡面的flutter和dart有關的設定刪掉。

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

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

首次執行報的錯

自動重試

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

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

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

等了好久，終於出來了。

image.png

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

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

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

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

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

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

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

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

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

報錯如下所示：

執行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學習總結系列----Flutter基礎全面詳解

（五）系統重灌了，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就是不顯示模擬器，如下圖所示：

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Flutter學習總結系列----Flutter基礎全面詳解

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

費了好大的勁截的圖---- 完整的檢視樹

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

換臺電腦顯示就不一樣了

九、幾個相關學習網站

另外可以推薦下載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學習總結系列----Flutter基礎全面詳解

解釋這三種型別的含義：

  • Flutter Application（Flutter應用專案）
本文中建立的就是這種型別。具體的下面會詳解。
複製程式碼
  • Flutter Plugin（Flutter外掛專案）
當我們建立了Flutter Plugin之後，發現多了一個我們自己命名的目錄，這個相當於一個本地的lib庫，
可以在` pubspec.yaml`檔案中配置路徑，然後在專案中使用。如下圖所示：
複製程式碼

Flutter Package工程結構

  • Flutter Package （Flutter包專案）

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

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

錯誤示範

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

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

Flutter學習總結系列----Flutter基礎全面詳解

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

Run執行示意圖

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

AS3.2編譯選單欄

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

Flutter學習總結系列----Flutter基礎全面詳解
點選它之後就可以進行熱載入。

（五）執行hello world程式

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

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

Flutter學習總結系列----Flutter基礎全面詳解

1.3.2 程式結構

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

Flutter學習總結系列----Flutter基礎全面詳解

【注意】 新建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

相關文章