腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Windows下Flutter+Idea環(huán)境搭建及配置

更新時(shí)間：2021年12月02日 17:10:43 作者：我是胡小結(jié)

這篇文章介紹了Windows下Flutter+Idea環(huán)境搭建及配置的方法，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

最近正式入坑Flutter，首先從環(huán)境搭建開(kāi)始，看了網(wǎng)上好多關(guān)于Windows環(huán)境搭建的資料，基本都是按官方文檔寫(xiě)的，看完的感受是，還不如直接去看官方文檔。

英文文檔傳送門(mén)：Get Started: Install on Windows

中文文檔傳送門(mén)：Get Started: Install on Windows

本文主要總結(jié)我實(shí)際搭建的過(guò)程，最后發(fā)現(xiàn)不一定按網(wǎng)上那些博客或者官方文檔寫(xiě)的來(lái)也可以搭建成功。

總的來(lái)說(shuō)需要的也就4樣?xùn)|西，找齊了配置一下就OK；

（1）Flutter SDK （建議下載官網(wǎng)的，下載完直接能用）配置環(huán)境
（2）準(zhǔn)備ide（Android Studio或者IntelliJ IDEA）配置flutter的SDK即可建議使用 Android Studio 會(huì)少些麻煩
（3）下載Dart插件
（4）下載Flutter插件
（5）解決問(wèn)題

安裝Flutter SDK

首先下載官方文檔中 flutter_windows_v2.5.1 壓縮包（如下圖紅框中所示），解壓到自己指定的位置，解壓完文件夾名稱(chēng)叫做flutter，這就是Flutter SDK了（后面再ide中配置的時(shí)候需要）。同時(shí)在系統(tǒng)path中添加flutter中bin所在的路徑

注意，不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\）

安裝flutter

在剛下載的flutter目錄下找到flutter_console.bat文件，雙擊可運(yùn)行文件,(這里網(wǎng)上有好幾種方法進(jìn)行flutter的安裝,比如說(shuō)打開(kāi)運(yùn)行,輸入powerShell,然后運(yùn)行flutter doctor,我試過(guò)都有問(wèn)題,還是用官網(wǎng)的這種方法最靠譜)，然后輸入指令:flutter doctor，即可自動(dòng)安裝，這個(gè)是官網(wǎng)推薦的方法，很靠譜。但是由于我們的國(guó)策，使用上面那種方法會(huì)一直處于以下的界面：

最后直接顯示超時(shí)：

所以，我們使用國(guó)內(nèi)鏡像的地址去下載：在輸入flutter docter之前輸入以下兩句：

1）命令行輸入第一條： set PUB_HOSTED_URL=https://pub.flutter-io.cn
2）命令行輸入第二條：set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
3）再次輸入flutter doctor 命令即可執(zhí)行成功

以上完美解決：Got socket error trying to find package mockito at https://pub.dartlang.org.這個(gè)問(wèn)題。

出現(xiàn)這個(gè)安裝成功。

如果出現(xiàn)下面這個(gè)問(wèn)題請(qǐng)按照下面步驟修復(fù),主要是因?yàn)?我們使用的是 Idea 沒(méi)有使用 Android Studio 沒(méi)有安裝 Android sdk 需要手動(dòng)安裝配置

下載SDK Manager Tools

這里下載,在官網(wǎng)下拉，在Command line tools only里下載對(duì)應(yīng)平臺(tái)的sdkManager；

下載后解壓得到文件夾 cmdline-tools, 我們的Android sdk放在 D:\Android\sdk下，解壓后的目錄最好放在F:\Android\sdk\cmdline-tools\latest里，否則當(dāng)執(zhí)行sdkmanager時(shí)會(huì)報(bào)錯(cuò)

執(zhí)行一下sdkmanager --list命令

沒(méi)有報(bào)錯(cuò)，命令成功執(zhí)行

原因分析及解決方法來(lái)源：https://stackoverflow.com/questions/65262340/cmdline-tools-could-not-determine-sdk-root

下載需要的平臺(tái)及工具

執(zhí)行sdkmanager “platform-tools” “platforms;android-29”

下載需要的平臺(tái)及工具，我準(zhǔn)備的android系統(tǒng)是10 ,對(duì)應(yīng)平臺(tái)為29

輸入y同意許可，等待下載完成

檢查一下sdk目錄發(fā)生了變化

執(zhí)行命令sdkmanager “build-tools;28.0.3”，下載build-tools,

先執(zhí)行一下 flutter config --android-sdk F:\Android\sdk，指定一下android sdk路徑,在執(zhí)行 flutter doctor --android-licenses 來(lái)修復(fù)許可

一路填 y,直到執(zhí)行完畢

再次執(zhí)行flutter doctor命令

配置環(huán)境變量

新建環(huán)境變量ANDRIOD_HOME，值為SDK安裝目錄，如F:\Android\sdk

配置環(huán)境變量Path，加入%ANDROID_HOME%\tools，%ANDROID_HOME%\platform-tools和%ANDROID_HOME%\build-tools

至此，flutter 和 android sdk的配置已經(jīng)進(jìn)行完畢

安裝Dart和Flutter插件

（1）Flutter需要如下兩個(gè)插件的支持：

Flutter 插件用來(lái)支撐Flutter開(kāi)發(fā)者的流程（運(yùn)行，調(diào)試，熱加載，等等）
Dart插件則提供代碼分析（代碼合法性校驗(yàn)，代碼補(bǔ)全等等）

（2）然后在Android studio或者IntelliJ IDEA 中下載Dart插件，假如下不了，那就是沒(méi)有進(jìn)行科學(xué)上網(wǎng)的原因，也可以通過(guò)科學(xué)上網(wǎng)訪問(wèn)下面的鏈接進(jìn)行下載。假如是自己通過(guò)如下鏈接下載的，則把下載后的zip包解壓后將整個(gè)文件夾復(fù)制到你使用的ide的plugins文件夾中（整個(gè)文件夾拷貝到plugins下即可）。

https://plugins.jetbrains.com/pluginManager/?action=download&id=Dart&build=IU-172.3757.52&uuid=076050b4-d279-493c-945e-5fb3ff2af32e

（3）然后在Android studio或者IntelliJ IDEA 中下載flutter-intellij插件，假如下不了，那就是沒(méi)有進(jìn)行科學(xué)上網(wǎng)的原因，也可以通過(guò)科學(xué)上網(wǎng)訪問(wèn)下面的鏈接進(jìn)行下載。假如是自己通過(guò)如下鏈接下載的，則把下載后的zip包解壓后將整個(gè)文件夾復(fù)制到你使用的ide的plugins文件夾中（整個(gè)文件夾拷貝到plugins下即可）。

https://plugins.jetbrains.com/pluginManager/?action=download&id=io.flutter&build=IU-172.3757.52&uuid=076050b4-d279-493c-945e-5fb3ff2af32e

配置Dart和Flutter插件到我們的idea中

打開(kāi)idea，Create New Project——>選擇Flutter，選擇SDK路徑后Next——>命名項(xiàng)目名（小寫(xiě)），選擇項(xiàng)目存儲(chǔ)路徑后ok。

然后進(jìn)去以后可能你看到并沒(méi)有下載項(xiàng)目資源，不要慌，我們配置一下，具體的如下所示，第一張是配置DartSDK的路徑（指向前面flutter的SDK中的 bin\cache\dart.sdk），第二張是配置flutter SDK路徑。配置完成后重啟ide，再重新創(chuàng)建新項(xiàng)目即可，等待的時(shí)間會(huì)比較長(zhǎng)，耐心等待完成就可以了。