Flutter指南之環境完整搭建

左撇峰子發表於2020-07-19
Flutter

背景

之前早就聽說 Flutter 在開發安卓 APP 上很方便，但因為時間問題遲遲沒有下載配置玩玩。最近心裡癢癢想試看看 Flutter 是否有那麼強大，所以今天就下定決定下載配置一番，環境搭建過程可謂是艱難吶！但是我電腦已經有了 VSCode，不想再裝一個 Android Studio，所以接下來我會給大家介紹下怎麼給 VSCode 配置 Flutter 開發環境。

配置Flutter SDK

安裝Flutter和Dart外掛

既然我們只用 VSCode 來開發，那就先把 Flutter 和 Dart 外掛先裝上。 開啟我們的 VSCode，搜尋 Flutter 外掛，這裡只安裝 Flutter 外掛就行，因為 Dart 外掛會跟著 Flutter 一起安裝。
*提示：解除安裝外掛時需要先解除安裝 Flutter，然後再解除安裝 Dart 外掛。

Flutter指南之環境完整搭建

下載 SDK

騰訊映象專用地址：flutter_sdk 先從上面地址裡下載對應的 SDK 包，解壓到一定的目錄裡，並重新命名為 flutter_sdk_1.17.5（你下載啥版本，字尾版本號就改為對應的就行，方便以後檢視 Flutter 版本）。

在這裡插入圖片描述

新增環境變數

桌面找到“此電腦”，然後右鍵選擇“屬性”，在左側找到“高階系統設定”，在“高階”選項卡找到“環境變數”，開啟它。

在這裡插入圖片描述
在“系統變數”下找到“Path”鍵，新增以下值：

X:\flutter_sdk_1.17.5\bin
複製程式碼

請替換成你的 Flutter SDK 路徑，要指向 Flutter SDK路徑\bin。新增好後，別急著關閉環境變數對話方塊，後面還會用到。

優化下載連結

找到 你的SDK安裝路徑\packages\flutter_tools\gradle，開啟 flutter.gradle檔案，註釋掉 google() 和 jcenter() 並改成下面程式碼：

buildscript {
    repositories {
        //google()
        //jcenter()
         maven { url 'https://maven.aliyun.com/repository/google' }
         maven { url 'https://maven.aliyun.com/repository/jcenter' }
         maven { url 'https://maven.aliyun.com/repository/public' }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
    }
}
複製程式碼

然後繼續找到 private static final String MAVEN_REPO 欄位，將後面的地址改為 https://storage.flutter-io.cn/download.flutter.io，修改完畢後關閉檔案。
同資料夾下再開啟另一個檔案 resolve_dependencies.gradle，將相關程式碼片段改為：

repositories {
    google()
    jcenter()
    maven {
        url "http://download.flutter.io"
    }
}
複製程式碼

這樣一來，可以防止執行 flutter run 命令時，一直處於 Running Gradle task 'assembleDebug' 的狀態，不過第一次編譯過程還算挺長的~

配置JDK

安裝 JDK

國內下載地址：AndroidDevTools 開啟上面網址後，導航欄找到“Android SDK 工具”-“JDK”，然後下載 1.8 版本的 JDK 後安裝即可。

在這裡插入圖片描述

新增環境變數

在“系統變數”新增以下相關鍵和值：

鍵 值
CLASSPATH .;%JAVA_HOME%\lib
JAVA_HOME 你的JDK安裝路徑

然後在 “Path”新增 %JAVA_HOME%\bin 和 %JAVA_HOME%\jre\bin 即可。

測試JDK

開啟 CMD，輸入 java 或 javac ，如果能正常返回資訊，則表明 JDK 環境配置正常，反之，則有問題。

在這裡插入圖片描述

配置Android SDK

安裝Android SDK

Android CMD Tools下載地址： 提取碼: 662t Android SDK下載地址：AndroidDevTools 開啟上面網址後，導航欄找到“Android SDK 工具”-“SDK Tools”，然後下載 24.4.1 版本的 SDK 後安裝即可。

在這裡插入圖片描述
這裡說明一下，上面的 3859397 只是一個 Android CMD Tools 工具，和我提供的 Android CMD Tools 一樣，只是我提供的版本相對較新。

下載相關API版本

下載解壓完畢後，開啟 你的Android SDK路徑\tools\android.bat 檔案，此時會啟動 Android SDK Manager，將需要的 Tools SDK Platform 勾選就行，然後勾選下面 Obsolete ，然後點選安裝包即可。

在這裡插入圖片描述
安裝完畢後，返回剛才的SDK路徑，此時應該有生成資料夾 build-tools、platforms、platform-tools，裡面還有對應各版本的 API 檔案。

替換Android CMD Tools

處理完 API 後，將 Android SDK 裡面的 tools 資料夾內的檔案全部刪除，再將 Android CMD Tools 下的 tools 資料夾替換進去，此時資料夾應該如圖：

在這裡插入圖片描述
之所以這樣做，是因為下載的 24.4.1 自帶的 tools 版本過低，導致 flutter doctor 老是提示 Android license status unknown.，升級或者更換新版本的 Android CMD Tools 就行了。 如果出現上述問題，可以嘗試換 Android CMD Tools 版本後再 flutter doctor 和 flutter doctor --android-licenses（不然會出現命令不能識別的情況）。

新增環境變數

在“系統變數”新增以下相關鍵和值：

鍵 值
ANDROID_HOME 你的Android SDK安裝路徑

然後在 “Path”新增 %ANDROID_HOME%\platform-tools 和 %ANDROID_HOME%\tools 即可。 至此，“Path”下應該有 5 條新配置的變數，如圖：

在這裡插入圖片描述

開發環境測試

開啟 VSCode 的終端，輸入以下命令：

flutter doctor
複製程式碼

此時，應該如圖所示：

在這裡插入圖片描述
因為我們沒有用到 Android Studio，所以出現感嘆號屬於正常，如果沒插入手機，第四個選項也會出現感嘆號。但是主要還是前面兩個，只要顯示打勾，那就表明環境搭建沒問題了。這樣 Flutter 開發環境就搭建完啦！

相關文章