Flutter指南之環境完整搭建

背景

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

配置Flutter SDK

安裝Flutter和Dart插件

既然咱們只用 VSCode 來開發，那就先把 Flutter 和 Dart 插件先裝上。 打開咱們的 VSCode，搜索 Flutter 插件，這裏只安裝 Flutter 插件就行，由於 Dart 插件會跟着 Flutter 一塊兒安裝。
*提示：卸載插件時須要先卸載 Flutter，而後再卸載 Dart 插件。

下載 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 開發環境就搭建完啦！