Windows下Flutter+Idea環境搭建及配置

Posted on by

最近正式入坑Flutter，首先從環境搭建開始，看瞭網上好多關於Windows環境搭建的資料，基本都是按官方文檔寫的，看完的感受是，還不如直接去看官方文檔。

英文文檔傳送門：Get Started: Install on Windows

中文文檔傳送門：Get Started: Install on Windows

本文主要總結我實際搭建的過程，最後發現不一定按網上那些博客或者官方文檔寫的來也可以搭建成功。

總的來說需要的也就4樣東西，找齊瞭配置一下就OK；

  • （1）Flutter SDK （建議下載官網的，下載完直接能用）配置環境
  • （2）準備ide（Android Studio或者IntelliJ IDEA）配置flutter的SDK即可 建議使用 Android Studio 會少些麻煩
  • （3）下載Dart插件
  • （4）下載Flutter插件
  • （5） 解決問題

安裝Flutter SDK

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

註意，不要將flutter安裝到需要一些高權限的路徑如C:\Program Files\）

安裝flutter

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

最後直接顯示超時：

所以，我們使用國內鏡像的地址去下載： 在輸入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 命令即可執行成功

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

出現這個安裝成功。

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

下載SDK Manager Tools

這裡下載,在官網下拉，在Command line tools only裡下載對應平臺的sdkManager；

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

執行一下sdkmanager --list命令

沒有報錯，命令成功執行

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

下載需要的平臺及工具

執行sdkmanager “platform-tools” “platforms;android-29”

下載需要的平臺及工具，我準備的android系統是10 ,對應平臺為29

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

檢查一下sdk目錄發生瞭變化

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

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

一路填 y,直到執行完畢

再次執行flutter doctor命令

配置環境變量

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

配置環境變量Path，加入%ANDROID_HOME%\tools，%ANDROID_HOME%\platform-tools和%ANDROID_HOME%\build-tools

至此，flutter 和 android sdk的配置已經進行完畢

安裝Dart和Flutter插件

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

  • Flutter 插件用來支撐Flutter開發者的流程（運行，調試，熱加載，等等）
  • Dart插件則提供代碼分析（代碼合法性校驗，代碼補全等等）

（2）然後在Android studio或者IntelliJ IDEA 中下載Dart插件，假如下不瞭，那就是沒有進行科學上網的原因，也可以通過科學上網訪問下面的鏈接進行下載。假如是自己通過如下鏈接下載的，則把下載後的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）然後在Android studio或者IntelliJ IDEA 中下載flutter-intellij插件，假如下不瞭，那就是沒有進行科學上網的原因，也可以通過科學上網訪問下面的鏈接進行下載。假如是自己通過如下鏈接下載的，則把下載後的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。

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

我們第一次運行是需要創建一個模擬器，需要根據 andriod sdk 下載對應鏡像,在settings裡找到android skd的配置，點edti

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

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

下載需要的系統鏡像

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

運行結果

至此，配置完畢

到此這篇關於Windows下Flutter+Idea環境搭建及配置的文章就介紹到這瞭。希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet

推薦閱讀：