Windows 10 系統下配置Flutter開發環境
在Windows平臺下開發移動端應用,需要配置Flutter開發環境,以下是保姆級教程,全網最詳盡,按照這個步驟一步一步往下走,保證可以配置一個完整的Flutter移動端開發環境,萬里長征第一步,祝您成功!
第一步:為Flutter設定鏡像配置。
由于Flutter默認的資源包、更新包等都在國外,在國內網絡環境訪問會有“墻”的阻礙,需要把目標地址指向國內的鏡像,因此需要配置兩個環境變量,具體操作如下:
1、Windows 10系統下點擊搜索,輸入“環境變量”,點擊“編輯系統環境變量”。
2、接著點擊“環境變量”,進入環境變量編輯頁面。
3、在“環境變量”頁面中,點擊用戶變量的“新建”按鈕,按照以下內容添加兩個環境變量:
變量名 | 變量值 |
PUB_HOSTED_URL | https://pub.flutter-io.cn |
FLUTTER_STORAGE_BASE_URL | https://storage.flutter-io.cn |
4、最后點擊“確定”—>“確定”。
第二步:系統配置要求。
要想安裝和運行 Flutter,你的開發環境至少應該滿足如下的需求:
1、一般情況,Windows 10系統默認已經安裝了Windows PowerShell 5.0,如果不確定版本,也可以打開Windows PowerShell,輸入$PSVersionTable,敲回車即可查看到版本信息:
2、下載安裝Git,點擊右邊網址鏈接:Git - Downloading Package (git-scm.com),下載Git,并安裝,安裝過程可以按照安裝引導選擇默認選項即可,安裝完成后如圖所示,你可以輸入“git –version”命令,查看版本信息:
第三步:獲取Flutter SDK
SDK,即Software Development Kit,中文意思是軟件開發工具包。Flutter SDK中包含了Flutter開發所需要的各種工具、框架等,是Flutter開發所必備的工具包,請按照以下內容配置好Flutter SDK:
1、下載Flutter SDK,點擊以下鏈接下載,如果鏈接失效,直接到Flutter官網下載,很簡單,這是3.7.3版本,是目前最新的穩定版本。
Flutter_windows_3.7.3-stable.zip
2、將壓縮包解壓,然后把其中的 flutter 目錄整個放在你想放置 Flutter SDK 的路徑中(例如 D:\src\flutter)。
請注意
請勿將 Flutter 有特殊字符或空格的路徑下。
請注意
請勿將 Flutter 安裝在需要高權限的文件夾內,例如 C:\Program Files\。
3、如果你不想安裝指定版本的安裝包。可以忽略步驟 1 和 2。從 GitHub 上的 Flutter repo 獲取源代碼,并根據需要,切換到指定的分支或標簽。例如:
C:\src>git clone https://github.com/flutter/flutter.git -b stable
現在你可以在控制臺當中使用 Flutter 的命令了。
第四步:更新Path環境變量
如果你想在 Windows 控制臺中運行 Flutter 命令,需要按照下面的步驟來將 Flutter 的運行文件路徑加入到 Path 環境變量。
1、打開上一步設置的Flutter目錄,進入bin文件夾,然后復制整個目錄路徑。
2、按照第一步的操作,打開“環境變量”頁面,然后選中Path,點擊“編輯”(如果沒有Path,則像上面那樣,點擊“新建”,創建Path變量),在“編輯環境變量”頁面中,點擊“新建”,把上面復制的目錄,粘貼在編輯框中,最后一步一步點擊“確定”完成操作。
3、此時,可以打開以上安裝的Git Base或者Windows PowerShell,又或者命令提示符均可,在上面輸入命令flutter –version,如果顯示Flutter版本信息,則說明Flutter SDK配置成功,如下圖所示,我用的是Git Bash進行測試。
第五步:配置Java開發環境
1、由于Flutter開發需要有Java的支持,因此,在這里也需要在你的機器上配置好Java SDK,也就是所謂的JDK,這里我用的是Java 17(LTS).可以進入官網下載最新的Java工具包:
Java 17(LTS)
2、由于到官網Oracle下載JDK速度較慢,也可以選擇國內的鏡像站去下載,例如以下鏈接:
Java 17(LTS) injdk鏡像站(www.injdk.cn)
選擇以下文件,點擊下載(如下圖所示:)
3、下載下來的是一個非安裝版的壓縮包,只需要加壓縮出來,把里面的文件夾jdk-17.0.1復制到一個目錄中(例如:D:\Java17)
4、接下來是配置環境變量。打開環境變量頁面,按照以下圖片所示進行配置:
(1)新建用戶環境變量JAVA_HOME,值為“D:\Java17\jdk-17.0.1”,如下圖:
(2)然后進入用戶變量中的Path,點擊“編輯”,新建以下path,即“%JAVA_HOME%\bin”,如下圖:
(3)測試JDK是否配置成功,操作如下:重新打開Windows PowerShell(注意:一定要重新打開Windows PowerShell,不能用在配置Java環境變量前打開的),然后輸入命令“java –version”,如果能夠成功顯示JDK版本信息,則說明JDK配置成功。
第六步:設置 Android 開發環境
目前比較流行的Android開發環境有谷歌自己的Android Studio,以及微軟的Microsoft Visual Studio Code,在這里推薦使用前者。
1、下載Android Studio。
2、安裝Android Studio,安裝路徑可以選擇默認位置,但最好改為自己比較熟悉的位置,我習慣放在D:\根目錄下。
3、接著是配置Android Studio。如果鏈接失效,直接到Flutter官網下載,很簡單。
(1)運行Android Studio,初始選擇如下,點擊OK:
(2)點擊Don’t send,這個時候先不要點擊Next
(3)如果出現以下圖片對話框,先點擊Cancel,然后點擊Next按鈕。
(4)在Install Type頁面中,選擇Custom,點擊Next按鈕進入下一步。
(5)來到Select default JDK Location,也就是選擇JDK的位置,此處可以保持默認,點擊Next按鈕進入下一步。
(6)Select UI Theme這一步中,選擇你喜歡的主題。
(7)來到SDK Components Setup這一步很重要,涉及到SDK的保存位置,我的想法是,最好不要讓其默認,而是選擇一個你比較熟悉的位置,我選擇的位置如圖所示:
(8)點擊Next時,會出現如下圖所示對話框,直接點擊OK,然后點擊Next按鈕。
(9)這一步的Emulator Settings,用Recommended值即可。
(10)接下來的那一步默認,然后來到License Agreement,這里需要把Licenses中的全部選項分別勾選上“Accept”,最后點擊Finish按鈕。
(11)接下來就是等待它自身下載完。
(12)到目前為止,Android Studio的安裝配置算是大功告成。
(13)接著來到項目創建,首先在彈出的歡迎界面中,下載Flutter和Dart插件。
(14)下載好Flutter插件后,點擊Flutter插件旁邊的Restart按鈕。這樣就可以看到一個可以創建Flutter Project的新的歡迎界面。
(15)接下來,點擊More Actions,然后點擊SDK Manager,來到Settings頁面。
(16)在Settings頁面中,按照如下圖所示,進行操作,點擊OK:
第七步:運行flutter doctor
運行flutter doctor,主要目的是檢驗Flutter配置到目前位置還有那些需要配置的東西。打開Git Base(上面已經安裝好了),輸入命令“flutter doctor”。你會發現這有一些打[x]的信息,接著就是一個個去解決,可以把打叉的信息復制到搜索引擎查找解決辦法,網上基本上都有。
比如我這里有5個,分別一個個解決。
(1)X Windows Version (Unable to confirm if installed Windows version is 10 or greater)
這個問題較好解決,打開面板依次運行flutter channel—>flutter channel master—>flutter upgrade—>flutter channel—>flutter doctor
最后執行flutter doctor檢查,即可解決。
(2)X Unable to locate Android SDK.
這個問題意思是找不到Android SDK,解決方法是用以下命令,指定Android SDK的目錄就行:
flutter config --android-sdk "D:\Android\SDK"
后面的參數"D:\Android\SDK"是你在之前配置Android Studio時設置的位置,參看以上第六步的第(7)小步。
(3)! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
這里是一個嘆號,并不是打叉,可以不管,但也可以解決,直接運行命令:flutter doctor --android-licenses,一路輸入“Y”,然后敲回車即可。
(4)最后的兩個問題。
一是Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
這個問題的意思是你的系統沒有安裝Chrome瀏覽器,這是用來開發web程序的;解決方法是直接安裝一個谷歌瀏覽器(Chrome Browser)即可,如果你不需要開發web程序,則可以不管。
二是Visual Studio - develop for Windows
X Visual Studio not installed; this is necessary for Windows development.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
這個問題意思是說需要你安裝Visual Studio來支持用Flutter來開發Windows桌面程序,還是那句,如果你不需要開發桌面程序,則可以不管。
最后的最后,如果單純用Flutter來開發移動端,則Flutter的配置到此結束,大功告成。