Flutter開發環境Window下搭建

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 執行程序

點擊「執行」

運行效果

設備鏈接異常

1. 是否爲「文件管理」模式
2. 是否打開了「開發者選項」
3. 是否打開了「USB調試」
4. 是否正確的安裝了的手機驅動
5. 打開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能夠執行。

設備鏈接異常

1. 是否爲「文件管理」模式
2. 是否打開了「開發者選項」
3. 是否打開了「USB調試」
4. 是否正確的安裝了的手機驅動
5. 打開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的進程，結束進程或卸載相關程序便可。