Flutter從配置安裝到填坑指南詳解(站長立薦好文)

AWeiLoveAndroid 發表於 2019-10-10

版權宣告:本文為博主原創文章,未經博主允許不得轉載。juejin.im/post/5d9ee2…

本文同步釋出在公眾號Flutter那些事,歡迎大家關注。

轉載請標明出處: juejin.im/post/5d9ee2… 本文出自 AWeiLoveAndroid的部落格

在 Google I/O ’17 上,Google 向我們介紹了 Flutter —— 一款新的用於建立移動應用的開源庫。

Flutter是什麼呢?它是Google使用Dart語言開發的移動應用開發框架,用來幫助開發者在iOS和Android平臺上開發高效能、高質量的原生應用。Flutter是跨平臺的免費開源UI框架,iOS和Android可以共用一套程式碼

2018年2月,Flutter推出了第一個Beta版本。這真是個好事。期待正式版早日釋出。最近研究了一下Flutter,這個工具從安裝到執行經歷了九九八十一難,好在終於成功執行起來了。下面看一下官方的Demo在Android模擬器的執行效果圖:

預設的Demo執行圖


本文同步釋出在github,更多關於Flutter的資訊請點選 github.com/AweiLoveAnd…


下面就 詳細的 講一下我的安裝之路和遇到的一些問題:

社會我韋哥,人好乾貨多。開始擼碼!


一、Flutter安裝:

要安裝並執行Flutter,你的開發環境必須滿足這些最低要求: 這裡以windows系統為例(flutter.io/setup-windo… macos安裝文件請檢視:flutter.io/setup-macos… linux安裝文件請檢視:flutter.io/setup-linux…

(一) 系統要求:Windows 7 SP1或更高版本(64位),磁碟空間:400 MB(不包括IDE /工具的磁碟空間)。CPU請用intel的,CMD的不能開發安卓(卡到爆!!)!記憶體條8G以上就行,其他硬體不做要求。

具體描述:略


(二) 下載JDK 1.8(必須是1.8版本)

1.首先開啟java官網 www.oracle.com/technetwork…,找到對應版本下載,如圖所示,我的電腦是Win7 64位,我就選擇最後一個下載。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

2.下好之後,雙擊安裝,一直點選下一步,選擇安裝路徑,安裝完畢之後,配置環境變數。

開啟環境變數的步驟:桌面“我的電腦”(或“計算機”)--> 右鍵“屬性”--> 選擇“高階系統設定”-->選擇下方的“環境變數”。

  • a.在彈出的“環境變數”視窗中,點選下方的“新建”按鈕,在彈出的“新建系統變數”視窗中,新建一個名為 JAVA_HOME 的環境變數,變數值為Java的安裝路徑,我的為:D:\develop\my_java\
  • b.編輯Path環境變數,在原變數值的最後面加上;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin,注意前面的分號別忘了。
  • c.新建一個名為“CLASSPATH”的環境變數,變數值為: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar,注意:一定不要忘了前面的點。

如圖所示:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

  • d.然後開啟命令列,輸入java -version,如果有版本號輸出,說明環境配置好了,否則請按上述步驟重新操作一次。具體輸出如圖所示:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)


(三) Android Studio、SDK、JDK以及模擬器配置(如果是真機執行不需要安裝模擬器)

Tips:
工具 工具對應的版本要求
Android Studio 3.0 或者更高的版本
SDK Android 4.1(API 16)或者更高版本
Android模擬器映象 推薦使用x86或者x86_64映象
  • (1)Android Studio下載

    Android Studio的下載地址請看:developer.android.google.cn/studio/#dow… 安裝方式:指定安裝路徑,一直點選下一步就可以了。然後解壓到一個英文目錄即可。我這裡選擇的是免安裝版。後面的介紹都是根據免安裝版進行講解的。安裝版的步驟其實也是差不多的。

  • (2)Android Studio安裝

1.雙擊桌面的Android Studio圖示(或者進入解壓之後的路徑/bin目錄,雙擊studio.exe),會出現一個匯入配置的視窗,如圖所示。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

2.因為是初次開啟Android Studio,我們一般不需要匯入配置,直接點選Do not import settings,點選OK進入下一步,這時候會顯示logo載入頁面。如圖所示。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

3.然後是彈窗,提示 讓你傳送反饋給谷歌,我們點選“Don't send”,不傳送。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

4.然後會有一個彈窗如圖所示。因為首次允許Android Studio它找不到SDK,會提示你設定代理,我這裡選擇取消。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

然後我們開啟android studio安裝路徑/bin目錄,找到idea.properties,開啟這個檔案,在末尾加上一行 disable.android.first.run=true,那麼以後再開啟android studio就不會再出現這個提示。如圖所示:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

5.接下來我點選next進入下一步,如圖所示。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

6.然後會提示我安裝版本,第一個是標準安裝,第二個是自定義安裝,我們這裡選擇預設的第二個Custom自定義安裝,直接點選next進入下一步既可。如圖所示:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

7.然後就是設定風格,這裡有白色和黑色可選,我選擇的右邊的黑色,如圖所示。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

8.接下來是設定安裝選項,如圖所示。預設會安裝Android SDK 以及Android SDK Platform,由於我電腦用的Intel的CPU,所以我這裡勾選了第三個選項Intel HAXM,這個主要是啟動模擬器時加速用的,順便我把第四個模擬器選項也勾選上,後續如有需要可以在模擬器安裝App進行操作。最下面是sdk的安裝路徑。預設是在C盤,一般我們要選定一個非C盤的安裝目錄,比如我這裡選擇的是D:\develop\sdk路徑。選好之後點next進入下一步。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

9.這裡是設定Intel HAXM預設的大小,我這裡就選擇預設的2G,如圖所示。點選next進入下一步。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

10.現在就開始安裝sdk了,稍作等待既可安裝完成了,如圖所示。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

11.安裝完成之後,點選Finish表示安裝完成。如圖所示。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

  • (4)SDK和安卓模擬器:

1.我們雙擊開啟Android Studio,進入歡迎頁,如圖所示:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

2.然後開啟右下角的Configure右邊的倒三角按鈕,選擇Settings,如圖所示:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

3.然後一次選擇Appearance and Behavior --> System Settings --> Android SDK,進入Android SDK頁面,我們可以看到SDK Platforms,這個就是前面安裝的時候預設安裝的那個檔案,是sdk的核心檔案。我們看看Android API 28下面有一個Google APIs Intel x86 Atom System Image模擬器,這個是帶有包含Google Play service 等 Google 的應用和服務的模擬器,一般情況我們使用Intel x86 Atom System Image模擬器(32位),或者Intel x86 Atom_64 System Image模擬器(64位)就可以了。在實際開發中,為了相容不同版本,你可以根據需要下載不同API對應的模擬器。如圖所示。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

【注意】關於Build Tools 版本的一些建議,建議下載Android SDK Platform 不同版本 以及對應的SDK Tools 版本。每一個檔案的詳細資訊說明截圖如下:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

4.需要在Path環境變數中新增兩個值。分別是 Android SDK中tools目錄的路徑和platform-tools的路徑。(如果已經配置,就不用再去配置了。)

D:\develop\sdk\tools;
D:\develop\sdk\platform-tools;
複製程式碼

(四) 工具:Flutter需要用到以下2個工具:

(1) PowerShell 5.0或更新版本

PowerShell是微軟推出的代替cmd的更方便的命令列工具,不管是win7 win8 還是win10windows系統都自帶有這個命令列工具。

檢視PowerShell有沒有安裝,可以點選電腦左下角 --> 控制皮膚 --> 程式 --> 程式和功能,找一下PowerShell,有時候安裝了也可能找不到(我電腦就找不到),那就win + R,輸入powershell回車,輸入$PSVersionTable ,檢視powershell版本。下圖就是我的powershell版本號資訊。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

如果報錯說明沒有安裝PowerShell,請按以下要求進行安裝:
  • 1.確保你已經安裝了.net 4.5以上。如果沒裝,直接裝.net 4.6即可: Microsoft .NET Framework 4.61 www.microsoft.com/zh-cn/downl…

  • 2.Microsoft .NET Framework 4.61 簡體中文語言包 www.microsoft.com/zh-cn/downl…

  • 3.裝ps5.0安裝包下載地址: www.microsoft.com/en-us/downl…

  • 4.安裝好之後,記得將powershell假如環境變數。如果環境變數有的話,就不用管它。(開啟powershell,,輸入$PSVersionTable,如果有版本資訊顯示,就是OK,如果報錯請設定環境變數。 )

如果或者你的版本號低於5.0,請點選電腦左下角 --> 控制皮膚 --> 程式 --> 程式和功能,找一下PowerShell,解除安裝。然後再按上述安裝步驟去安裝PowerShell。

【注意:】關於命令列無法顯示某些字元或者中文亂碼問題的解決:

  • 1、無法顯示√或者×字元 原因是點陣字型搞的鬼。設定一下控制檯字型就可以了。 在控制檯標題右鍵,選擇字型,把點陣字型改為其他字型就可以了。

  • 2、cmd中文亂碼的解決:

1. win+R 輸入regedit 進入登錄檔 
2. 找到 `HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe` 
如果該項下已存在CodePage項,則把值改為十進位制”65001”;
如果不存在,在該項下新建一個 DWORD(32位值),命名為“CodePage”,值設為“65001” 
3. 重啟cmd後生效
複製程式碼
  • 3、PowerShell中文亂碼的解決:
1. win+R 輸入regedit 進入登錄檔
2. 找到 `HKEY_CURRENT_USER\Console\%SystemRoot%_system32_WindowsPowerShell_v1.0_powershell.exe` 下的項。
如果該項下已存在CodePage項,則把值改為十進位制”65001”;
如果不存在,在該項下新建一個 DWORD(32位值),命名為“CodePage”,值設為“65001”
3. 重啟PowerShell後生效

安裝好之後,執行一下看看版本號,我這邊的powershell版本號相關資訊如下:

    PSVersion                      5.1.15063.1029
    PSEdition                      Desktop
    PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
    BuildVersion                   10.0.15063.1029
    CLRVersion                     4.0.30319.42000
    WSManStackVersion              3.0
    PSRemotingProtocolVersion      2.3
    SerializationVersion           1.1.0.1
複製程式碼
(2) Git for Windows

使用git命令列(關於如何使用git,請檢視我的博文 Git及GitHub快速入門圖文全面詳解):

git clone -b beta https://github.com/flutter/flutter.git
複製程式碼

執行過程截圖(這裡下載的是beta版的,你也可以下載其他分支的,比如master分支):

Flutter從配置安裝到填坑指南詳解(站長立薦好文)


二、配置環境變數

(一)配置 flutter 環境變數

如果想在命令列中使用 flutter 命令,你需要新增flutter的路徑到path中去。這個和配置java環境變數是同樣的做法,找到flutter安裝路徑,比如我的是E:\develop\flutter\bin,我複製這個路徑,右鍵我的電腦-->屬性-->高階系統屬性-->環境變數-->找到PATH,點選編輯-->在最後把剛複製的路徑貼上進來,-->一直儲存確定就可以了。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

接下來,使用flutter --version 檢視一下版本號,看看環境變數配置好了沒有。。如果如下圖所示表示OK。

【大坑】注意:如果只輸入flutter 或者輸入flutter -version, 那麼flutter以為是下達了自動更新命令,會自動更新最新版本,這個一定要注意了。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

(二)配置國內映象(為了以後的穩定性,這一步一定要做,免得老是翻牆)

如果你在國內使用 Flutter,那麼你可能需要找一個與官方同步的可信的映象站點,幫助你的 Flutter 命令列工具到該映象站點下載其所需的資源。你需要為此設定兩個環境變數:PUB_HOSTED_URLFLUTTER_STORAGE_BASE_URL,然後再執行 Flutter 命令列工具。

上海交通大學 Linux 使用者組
FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn
PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn

Flutter 社群
FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn
PUB_HOSTED_URL: https://pub.flutter-io.cn
複製程式碼

建議使用Flutter 社群這個映象,這個比較快

配置國內映象


三、開啟flutter命令列

win + R 快捷鍵,輸入cmd,回車,輸入flutter doctor,回車。

這個命令初次執行可能會很慢,Flutter會自動安裝所需依賴,並進行編譯。建議科學上網

使用flutter doctor命令下載的dart sdk會放到flutter安裝路徑/bin/cache/dart-sdk目錄(例如:我的路徑是:E:\develop\flutter)。

【注意】直接下載dart sdk是無法再flutter中使用的,使用flutter doctor命令下載的dart sdk是閹割版的dart,很多api都有變更,並且flutter和dart版本號是一一對應的,直接下載dart sdk是最新的,不適用於flutter。切記!!別為了圖一時方便直接下載dart sdk,放到flutter安裝路徑/bin/cache/dart-sdk目錄而導致flutter無法使用!!!

安裝過程截圖:

輸入flutter doctor命令

安裝完成之後(這裡沒有安裝Flutter和Dart外掛,大家可以開啟AS自己搜尋安裝,如何安裝下文有介紹)

注意: [√]這個是安裝OK的,[X]是需要安裝的,或者是已安裝但是沒有執行起來的。(具體這裡面有標記[X]的那些項如何安裝後文有詳細講解,這裡簡單提一下。)

這裡面有四項內容:

  • (1)Flutter 這是Flutter工具,就是剛才git下載的那個。
  • (2)Android工具鏈,這裡指的是SDK,會標註出SDK的最大版本號。
  • (3)IDE工具的對應版本,比如我的是Android Studio 2.2版本(這個是下載安裝的版本),Android Studio 3.2版本(這個是免安裝的版本,所以也會顯示出來),還有Intellij IDEA
  • (4)已連線的裝置,可以是模擬器,也可以是真機,如果已連線會顯示出來。

四、幾個flutter常用命令

檢視版本號的命令使用截圖如下:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

以下是常用命令:

常用命令 含義
--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副本。

五、開發工具的安裝

(一)AS

Flutter對Android Studio的要求:需要安裝3.0 或者更高的版本

關於AS安裝,這個就不用說了,大家都安裝了吧,jdk,sdk這些都配置好了吧.直接看下文好了。

(二) Flutter和Dart外掛安裝

Flutter需要FlutterDart外掛才可以使用:

File --> settings --> Plugins --> Browse repositories,然後輸入Flutter就可以下載了,Drat也是一樣的道理。

  • Flutter外掛安裝:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

  • Dart外掛安裝:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

安裝好之後重啟一下AS就可以使用外掛了。


六、需要更新Flutter請看以下操作(不更新Flutter的就跳過此步):

要同時更新Flutter SDK和包,請使用以下命令:

flutter upgrade
複製程式碼

七、如果已經安裝Fluttter,需要切換Flutter分支,比如我要下載PreView版本 如何操作:

前面我們下載的beta分支下面的包,最近Flutter推出了PreView版本,那麼我們應該如何更新呢?

先看幾個命令:

檢視遠端分支:

git branch -a 
複製程式碼

檢視本地分支:

git branch -v
複製程式碼

切換分支:

git checkout -b 分支名稱

> 例如 切換到master分支:

git checkout -b master
複製程式碼

git如何clone遠端github中的分支?

git clone -b 分支名稱  github上的url
複製程式碼

例如:下載flutter的master分支(PreView版本就是這個分支),命令如下所示:

git clone -b master https://github.com/flutter/flutter.git
複製程式碼

八、執行一個demo app

Flutter支援的sdk環境:Android 4.1(API 16)或者更高版本。 Android模擬器:推薦使用x86或者x86_64映象。

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

(一)開啟AS,點選 File --> New Flutter Project,選擇Flutter application

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

然後點選next,輸入一個工程名字。

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

錯誤示範

(二)輸入包名,點選next,點選finish,等待編譯就可以了。如果沒配置好,這個時候往往會報錯。

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

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

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

Run執行示意圖

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

AS3.2編譯選單欄

如果程式碼有更改,可以點選 黃色的閃電圖示 或者編輯完程式碼之後按 Ctrl + S 鍵也可以 啟動熱過載 功能。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)
點選它之後就可以進行熱載入。

執行之後的截圖:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

工程目錄結構:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)


九、隱藏句尾註釋:

我們看到程式碼會發現每個句尾都有一個註釋,提示你當前是屬於哪個元件的範圍,如果你不喜歡可以設定不顯示:點選選單欄File -> Settings,點選Editor,選擇Appearance,把最後一個 去掉即可隱藏句尾註釋。如下圖所示:

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資料夾刪掉,重新執行git命令,下載flutter。(下好了之後記得配置環境變數)然後執行flutter doctor 命令,這次好一些了,但是命令列更新的很慢,一直停留在命令列,如圖所示:

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

等了好久,終於出來了。

image.png

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

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

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

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

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

Flutter從配置安裝到填坑指南詳解(站長立薦好文)

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

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從配置安裝到填坑指南詳解(站長立薦好文)

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

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工具也是重新安裝的,由於沒有備份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從配置安裝到填坑指南詳解(站長立薦好文)

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

Flutter從配置安裝到填坑指南詳解(站長立薦好文)


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

Flutter從配置安裝到填坑指南詳解(站長立薦好文)


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

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

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

換臺電腦顯示就不一樣了

(九)Flutter初次建立專案一直進不去,錯誤如圖所示:

Flutter建立專案一直進不去

【解決方式】開啟Android Studio安裝目錄下的 bin 目錄,找到 idea.properties 檔案,在檔案最後追加以下這行程式碼,然後儲存,以後開啟Android Studio建立專案就不會卡住了:

disable.android.first.run=true
複製程式碼

(十)Flutter編譯之後工程目錄沒有build目錄怎麼解決?

【解決方式】點選project(如果不是project,請點選右邊的倒三角按鈕切換到project檢視)旁邊的齒輪圖示,勾選Show Excluded Files就OK了。

Flutter從配置安裝到填坑指南詳解(站長立薦好文)


十一、幾個相關學習網站

GitHub

  • github.com/AweiLoveAnd…
    Flutter安裝和配置,Flutter開發遇到的難題,Flutter示例程式碼和模板,Flutter專案實戰,Dart語言學習示例程式碼。

  • 我的公眾號

    ![公眾號二維碼 (帶名字).png](https://upload-images.jianshu.io/upload_images/6098829-f3f291af806eee77.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Flutter有關網站

Dart有關網站


博主Flutter系列博文連結 ↓:

工具安裝:

Flutter基礎篇:

Flutter進階篇:

Dart語法系列博文連結 ↓: