Flutter開發環境Window下搭建

不解釋cium發表於2019-12-30

1.前言

前言廢話可以不看，直接從安裝環境開始看

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。Flutter在效能方面也是號稱可以與原生媲美的。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。

雖然Flutter也有一些跨平臺開發框架的通病，在開發過程中必不可少的要與原生程式碼互相呼叫，我一個前端哪知道什麼是UIViewController，什麼是Activity呢？我要是雙端都熟悉，學習Flutter就顯得很沒有必要。

好了廢話不多說了，我們開始搭建環境吧！

2.java環境安裝

2.1 做基於android的原生app，首先需要安裝java環境

連結: pan.baidu.com/s/1PMYNClav…

提取碼: adkv

這裡是window下的安裝包，下載後直接安裝就可以了。注意這裡有坑建議使用我網盤中提供的java安裝包版本，如果是其他版本的java安裝包可能會出現問題。

2.2 快捷鍵`window + r`輸入`cmd`開啟cmd視窗輸入`java -version`回車如果出現版本號就表示安裝成功

2.3 如果沒有出現版本號,那就需要配置環境變數了(安裝成功就可以跳過此步驟)

2.3.1 右鍵點選我的電腦-屬性-高階系統設定-高階-環境變數

2.3.2新增`JAVA_HOME`到系統環境變數

JAVA_HOME

D:\Program Files\Java\jdk1.8.0_152

2.3.3給系統環境變數`Path`中新增`%JAVA_HOME%\bin;`,如果沒有Path可以新建一個環境變數

2.3.4最後再次開啟cmd檢視java版本,如果還不行就重啟電腦

3 設定Flutter映象

在使用Fultter指令時，有些時候會聯網下載依賴資源。在國內通過Flutter訪問網路有時會不穩定，Flutter官方為中國開發者搭建了臨時映象，大家可以將如下環境變數加入到使用者環境變數中

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

此映象為臨時映象，並不能保證一直可用，讀者可以參考詳情請參考 Using Flutter in China 以獲得有關映象伺服器的最新動態。

4 安裝FlutterSDK系統要求

要安裝並執行Flutter，您的開發環境必須滿足以下最低要求(不包括安裝Android Studio的空間):

作業系統: Windows 7 或更高版本 (64-bit)
磁碟空間: 400 MB (不包括Android Studio的磁碟空間).
命令列工具: Git for Windows和Windows Power Shell
- 如果已安裝Git for Windows，請確保命令提示符或PowerShell中執行 git 命令，不然在後面執行flutter doctor時將出現Unable to find git in your PATH錯誤, 此時需要手動新增C:\Program Files\Git\bin至Path系統環境變數中。

5 安裝Flutter SDK

5.1 下載Fullter安裝包

在Fultter官網上下載最新可用安裝包，最好使用stable穩定釋出版

JDK, Flutter Windows SDK

5.2 解壓安裝包

將下載後的安裝包解壓，路徑中最好不要有中文和空格，不要使用系統中需要高授權的路徑

5.3 配置環境變數

在系統環境變數Path中新增D:\flutter\flutter\bin;的完整路徑,注意每個環境變數之間要以;分割

5.4 執行flutter doctor指令檢查依賴

目前只能在命令列提示符(cmd)或Windows Power Shell中執行flutter doctor指令。

第一次執行flutter doctor指令時，它會下載它自己的依賴項並自行編譯，時間可能較長。如果沒有在3小節配置flutter的映象環境變數，指令可能執行失敗。

這個時候會檢測出很多的錯誤,那是因為我們還沒有配置Android SDK和相關外掛

6. 下載和安裝Android Studio

如果不想使用Android Studio作為開發工具的可以跳過,直接進入7小結(電腦配置比較高的話建議下載Android Studio來配置Android SDK)

Android Studio官網下載地址

下載後正常安裝即可，安裝路徑不要有中文和空格。啟動Android Studio，然後執行“Android Studio安裝嚮導”。這將安裝最新的Android SDK，Android SDK平臺工具和Android SDK構建工具，這是Flutter為Android開發時所必需的

依賴檢查
開啟Windows Power Shell執行“flutter doctor”檢查依賴，可以看到Android Studio和Android SDK(如果任顯示Android SDK有問題請看7小結)已經安裝，但提示缺少“Flutter”和“Dart”兩個plugin（外掛）。

7. Android SDK安裝

如果6小結安裝完全正常,可以跳過7小結

7.1 Android SDK安裝工具:

連結: pan.baidu.com/s/12OMPV5kq…

提取碼: 3yqr

注意：安裝(解壓)路徑上不要有中文和空格

如果真機除錯程式可以不安裝System Image以節省安裝時間

執行SDK Manager.exe下載Android開發環境，點選“Install x packages”進行下載安裝

選擇“Accept License”並點選“Install”進行安裝

等待安裝進度完成

安裝完成，所選項的status變成“Installed”

配置ANDROID_HOME環境變數
在“環境變數”的“使用者變數”中新建變數“ANDROID_HOME”，將Android SDK的安裝路徑設定為變數的值

在“環境變數”的“使用者變數”中的Path中追加路徑

%ANDROID_HOME%\tools
%ANDROID_HOME%\platform-tools

7.2 Flutter中確認Android SDK安裝

開啟Windows Power Shell執行指令"flutter doctor"

發現已經獲得到了Android SDK的版本，但提示一個錯誤“Android license status unknown”。其指的是“沒有接受Android的許可”

執行指令"flutter doctor --android-licenses"

如果提示多個確認（y/n）,請一直輸入“y”至結束
如果提示如下圖

請輸入提示"地址+.bat --update"。
上圖輸入的就是"D:\Android\android-sdk\tools\bin\sdkmanager.bat --update"
此時會提示選擇“y/n”，輸入y後回車確認，可能需要等待一小段時間。

重新執行指令：”flutter doctor --android-licenses
應該不會再出現“Android license status unknown”錯誤

如果問題仍然存在
可能出現根據下圖所示可能是移除tools資料夾時出現問題

解決辦法 來到路徑指向的資料夾，將其中tools更改為tool。

在Windows Power Shell中執行指令“D:\Android\android-sdk\tool\bin\sdkmanager.bat --update”，等待系統生成新的tools資料夾和其中的內容，這可能會花費一段時間。

注意: 此時如果出現找不到java包的問題,那就是你安裝的java的版本不對.找到2小結我提供的javaJdk重新安裝

在Windows Power Shell中重新執行指令flutter doctor --android-licenses
會提示多次選擇(y/n)的操作，一律輸入"y"

全部確認後，重新執行指令flutter doctor
可以看到錯誤“Android license status unknown”消失。

8. 下載Flutter和Dart外掛

8.1.1 使用Android Studio安裝外掛

開啟“Configure”->"Plugins"

搜尋dart，建議先安裝dart外掛，再安裝flutter外掛。由於網路不穩定原因，搜尋可能會支援一段時間或者提示沒有搜尋到結果。請耐心多試幾次。
也可以通過訪問網站下載離線安裝包
plugins.jetbrains.com/androidstud…
下載離線安裝包時請確認好IDE與安裝包的版本是否吻合
通過點選“Get Help”中的“About”來確認版本

在網站上選擇合適的版本下載(更細緻的版本號請忽略)

下載好離線安裝包後，通過點選“齒輪”中“Install Plugin from Disk”，選擇下載好的zip檔案即可安裝

檢查安裝後的外掛，確認後重啟Android Studio

檢查依賴
開啟Windows Power Shell，輸入“flutter doctor”檢查依賴。發現外掛錯誤也解決了。

8.1.2 建立flutter專案

安裝Dart和Flutter外掛後，重啟Android Studio看到可以建立Flutter工程

點選“Start a new Flutter project”建立一個Flutter工程
選擇工程型別
第一個是App應用
第二個是外掛開發
第三個是Widget（元件）開發
第四個是為Android或IOS的APP提供Module

工程名字
選擇第一個App應用開發後，點選“Next”，填寫工程名字等基本資訊

package名字
填寫工程名字後，點選“Next”，填寫package名字

點選Finish完成建立，進入編輯頁面

工程目錄結構
main.dart是核心啟動檔案

8.1.3 聯機除錯

工具臺

真機聯調
通過手機連線USB進行除錯，首先要確保在Android SDK Manager中安裝了“Googel USB Driver”

通過USB連線手機，在手機上的設定中開啟“開發者選項”和其中的“USB除錯”。等待計算機安裝手機驅動後，如果工具臺還顯示“”，請重啟Android Sutdio

在Widows Power Shell中執行“flutter doctor”，發現沒有問題存在

8.1.4 執行程式

點選“執行”

執行效果

裝置連線異常

是否為“檔案管理”模式
是否開啟了“開發者選項”
是否開啟了“USB除錯”
是否正確的安裝了的手機驅動
開啟cmd，是否能正常執行adb指令，若adb指令提示缺失“api-ms-win-crt-runtimel1-1-0.dll”。在windows7 sp1作業系統中，需要vc環境支援，需要下載vc_redit.exe www.microsoft.com/zh-cn/downl…

gradle異常
執行時如果 Initializing gradle時出現異常如

"xxxx\gradlew.bat" exited abnormally (xxxx為路徑)

根據提示的網址下載zip包並放入異常指向的目錄即可
一般目錄為：C:\Users\計算機使用者名稱.gradle\wrapper\dists\gradle-4.10.2-all\9fahxiiecdb76a5g3aw9oi8rv（可能是其他的序列）

adb.exe已停止工作

在使用真機除錯的時候碰到了adb.exe 已經停止工作的錯誤。由於adb的預設埠5037，被其他程式佔用了。
在cmd中輸入 netstat -ano|findstr "5037"，尋找佔用5037埠的PID
在工作管理員中尋找PID為5037的程式，結束程式或解除安裝相關程式即可。

8.2 VSCode安裝flutter,dart外掛

8.2.1 安裝外掛

開啟VSCode查詢並安裝擴充套件flutter和Dart(安裝flutter外掛時預設會把dart外掛也安裝上)

後使用ctrl+shift+p調出命令皮膚, 然後選擇 Flutter: New Project, 建立專案, 沒有錯誤就行。Android Studio不用管。

8.2.2 啟動專案

通過USB連線手機，在手機上的設定中開啟“開發者選項”和其中的“USB除錯”。
此時vscode在下圖示記位置會顯示連結裝置的名稱

進入專案，使用flutter run可以執行。