溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何配置Flutter+Idea環(huán)境

發(fā)布時間:2021-12-02 11:44:30 來源:億速云 閱讀:290 作者:小新 欄目:開發(fā)技術(shù)

這篇文章主要介紹了如何配置Flutter+Idea環(huán)境,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

安裝Flutter SDK

首先下載官方文檔中 flutter_windows_v2.5.1 壓縮包(如下圖紅框中所示),解壓到自己指定的位置,解壓完文件夾名稱叫做flutter,這就是Flutter SDK了(后面再ide中配置的時候需要)。同時在系統(tǒng)path中添加flutter中bin所在的路徑
注意,不要將flutter安裝到需要一些高權(quán)限的路徑如C:\Program Files\)

如何配置Flutter+Idea環(huán)境

安裝flutter

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

如何配置Flutter+Idea環(huán)境

最后直接顯示超時:

如何配置Flutter+Idea環(huán)境

所以,我們使用國內(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.這個問題。

如何配置Flutter+Idea環(huán)境
如何配置Flutter+Idea環(huán)境

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

如果出現(xiàn)下面這個問題請按照下面步驟修復,主要是因為 我們使用的是 Idea 沒有使用 Android Studio 沒有安裝 Android sdk 需要手動安裝配置

如何配置Flutter+Idea環(huán)境

下載SDK Manager Tools

這里下載,在官網(wǎng)下拉,在Command line tools only里下載對應平臺的sdkManager;

如何配置Flutter+Idea環(huán)境

下載后解壓得到文件夾 cmdline-tools, 我們的Android sdk放在 D:\Android\sdk下,解壓后的目錄最好放在F:\Android\sdk\cmdline-tools\latest里,否則當執(zhí)行sdkmanager時會報錯

如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境

沒有報錯,命令成功執(zhí)行
原因分析及解決方法來源:https://stackoverflow.com/questions/65262340/cmdline-tools-could-not-determine-sdk-root

下載需要的平臺及工具

執(zhí)行sdkmanager “platform-tools” “platforms;android-29”
下載需要的平臺及工具,我準備的android系統(tǒng)是10 ,對應平臺為29

如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境
如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境

一路填 y,知道執(zhí)行完畢

如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境

配置環(huán)境變量

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

如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境

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

安裝Dart和Flutter插件

(1)Flutter需要如下兩個插件的支持:
Flutter 插件用來支撐Flutter開發(fā)者的流程(運行,調(diào)試,熱加載,等等)
Dart插件則提供代碼分析(代碼合法性校驗,代碼補全等等)
(2)然后在Androidstudio或者IntelliJ IDEA 中下載Dart插件,假如下不了,那就是沒有進行科學上網(wǎng)的原因,也可以通過科學上網(wǎng)訪問下面的鏈接進行下載。假如是自己通過如下鏈接下載的,則把下載后的zip包解壓后將整個文件夾復制到你使用的ide的plugins文件夾中(整個文件夾拷貝到plugins下即可)。

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

(3)然后在Androidstudio或者IntelliJ IDEA 中下載flutter-intellij插件,假如下不了,那就是沒有進行科學上網(wǎng)的原因,也可以通過科學上網(wǎng)訪問下面的鏈接進行下載。假如是自己通過如下鏈接下載的,則把下載后的zip包解壓后將整個文件夾復制到你使用的ide的plugins文件夾中(整個文件夾拷貝到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中

打開idea,Create New Project——>選擇Flutter,選擇SDK路徑后Next——>命名項目名(小寫),選擇項目存儲路徑后ok。

如何配置Flutter+Idea環(huán)境
如何配置Flutter+Idea環(huán)境

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

如何配置Flutter+Idea環(huán)境
如何配置Flutter+Idea環(huán)境

我們第一次運行是需要創(chuàng)建一個模擬器,需要根據(jù) andriod sdk 下載對應鏡像,在settings里找到android skd的配置,點edti

如何配置Flutter+Idea環(huán)境

在彈出窗口中點next 開始下載

如何配置Flutter+Idea環(huán)境
如何配置Flutter+Idea環(huán)境

下載完成需要等待一定時間,下載完畢點finish按鈕

下載需要的系統(tǒng)鏡像

如何配置Flutter+Idea環(huán)境
如何配置Flutter+Idea環(huán)境

接著就可運行項目,配置運行到 Chrome (web)

如何配置Flutter+Idea環(huán)境

運行結(jié)果

如何配置Flutter+Idea環(huán)境

至此,配置完畢

感謝你能夠認真閱讀完這篇文章,希望小編分享的“如何配置Flutter+Idea環(huán)境”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI