使用 VSCode 搭建 Flutter環境

概述

編輯器使用 vscode，不再安裝 Android Studio。

安裝 Git

點擊這裏下載並安裝 Git

配置 Java 環境

下載和安裝 JDK

點擊下載 Java SE Development Kit 8

我的安裝路徑是 “D:\Programs\Java\jdk1.8.0_291”，你可以根據情況而定。

配置環境變量

搜索框中輸入 “env” 打開 “編輯系統環境變量配置”

JAVA_HOME

變量名：JAVA_HOME
變量值：D:\Programs\Java\jdk1.8.0_291

CLASSPATH

變量名：CLASSPATH
變量值：.;% JAVA_HOME%\lib;% JAVA_HOME%\lib\tools.jar;

注意：變量值的開頭有個英文點。結尾有個英文分號；

添加到系統變量

將剛剛新建的最後一項移動到頂部：

通過點擊確定將所有窗口關閉

測試

打開 CMD 輸入 “java -version”

輸入 “javac”

配置 Android 環境

安裝 Command line tools

下載和解壓

下載 Command line tools

解壓到 “D:\Protable\Android\sdk”

注意：“D:\Protable\Android\sdk” 是我的 Android SDK 存放的路徑，可以根據你的情況更改到其他位置。但是，一般將 Android SDK 放到 “Android\sdk” 目錄下。

把 D:\Protable\Android\Sdk\cmdline-tools\bin 加入到環境變量：

注意：“D:\Protable\Android\Sdk\cmdline-tools” 是我的 cmdline-tools 解壓後存放的路徑，應改成你的位置，不過一定將 bin 目錄加入到環境變量。

command-tools

command-tools 包含以下幾個 command-tool

apkanalyzer 是一個命令行工具，可以在構建流程完成後立即瞭解 APK 的組成，並且可以比較兩個 APK 之間的差異。使用 apkanalyzer 可以減少調試應用中的 DEX 文件和資源相關問題所花費的時間，並減小 APK 的大小。

avdmanager 是一個命令行工具，可以用於從命令行創建和管理 Android 虛擬設備 (AVD)。藉助 AVD，您可以定義要在 Android 模擬器中模擬的 Android 手機、Wear OS 手錶或 Android TV 設備的特性。

lint 是一個命令行工具，用於代碼掃描，可以幫助您識別和糾正代碼的結構質量問題。

retrace 是一個命令行工具，對於由 R8 編譯的應用程序，用於從經過混淆處理的堆棧軌跡獲取原始堆棧軌跡。系統會通過在映射文件中對類名和方法名與其原始定義進行匹配來重構堆棧軌跡。（對映射回原始源代碼的模糊堆棧跟蹤進行解碼）

sdkmanager 是一個命令行工具，允許你查看、安裝、更新和卸載 Android SDK 的軟件包。我們不使用 Android Studio，所以可以使用這個命令行工具管理 SDK 包。

安裝需要的 Android 環境

在 cmd 中輸入如下命令，安裝需要的 Android 環境

sdkmanager "platform-tools" "platforms;android-28" "build-tools;28.0.3"

將 platform-tools 加入系統環境變量

debug 工具 adb（Android Debug Bridge）就在 platform-tools 目錄下，下文使用的 adb xxx 命令正是來源於此。

使用代理

適用於所有命令，指示使用代理

sdkmanager --proxy=http --proxy_host=127.0.0.1 --proxy_port=1080

--proxy={http | socks} 通過給定類型的代理連接：HTTP 或 FTP 等高級協議的 http，或 SOCKS（V4 或 V5）代理的 socks。

也可以在用戶目錄下～/.android 創建 androidtool.cfg 文件：

http.proxyPort=1080
http.proxyHost=127.0.0.1

配置安卓環境變量

ANDROID_HOME

變量名：ANDROID_HOME
變量值：D:\Protable\Android

ANDROID_SDK_ROOT

變量名：ANDROID_SDK_ROOT
變量值：D:\Protable\Android\Sdk

注意：這裏選擇的是 Sdk 目錄，和 ANDROID_HOME 的變量值不同

下載和安裝 Flutter SDK

配置 Flutter 國內鏡像

在任意位置右鍵 “Git bash here”

export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Flutter SDK

下載 Flutter SDK

點擊這裏查看 Flutter SDK 列表，並下載

解壓到 D:\Protable\flutter

注意：“D:\Protable\flutter 是我的 Flutter SDK 存放的路徑，可以根據你的情況更改到其他位置。

配置 Flutter SDK 環境變量

打開 cmd 輸入 “flutter” 檢測環境變量：

接受許可協議

在 cmd 中輸入如下命令，並在交互式 “對話” 中全部回覆 “y”

flutter doctor --android-licenses

檢測 flutter 開發環境

在 cmd 中輸入如下命令：

flutter doctor

配置 VSCode

點擊這裏下載並安裝 VSCode

在插件中搜索 Flutter 並安裝

創建 Flutter 項目

通過 ctrl + shift + p 打開命框，輸入 “flutter” 並選擇 “New Application Project”

輸入項目名稱按下回車即可創建項目

調試

使用瀏覽器調試

注意右下角狀態欄，你也可以通過點擊此處切換到 Edge Chromium

按下 f5 並選擇 “Dart&Flutter”

稍等片刻即可自動打開 Chrome

使用真機調試

首先需要進入 “開發者選項” 將手機的 “允許 USB 調試” 打開，使用數據線連接電腦，同意 USB 調試。在 CMD 中輸入如下命令，設置 wifi 連接的端口號爲 5555

adb tcpip 5555

在 CMD 中輸入如下命令，鏈接手機。你的手機的 IP 地址一般在設置 > wifi > 高級設置中查看。比如 IP 爲：x.x.x.x

adb connected to x.x.x.x:5555

在啓動應用之前，注意此時 VSCode 中右下角的狀態欄中顯示的應是通過 USB 鏈接的手機型號

按下 f5 並選擇 “Dart&Flutter”。稍等片刻會在手機中彈出安裝提示，同意即可。

使用模擬器調試

使用模擬器調試，Windows 需要打開 Hyper-V 服務，並在 BIOS （電腦主板設置）中啓用 VT（虛擬化技術）。

安裝 Intel HAXM

Intel HAXM （Hardware Accelerated Execution Manager），即英特爾硬件加速執行管理器（Intel HAXM）是一款硬件輔助虛擬引擎（管理程序）使用基於 Intel (R) Virtualization Technology （VT）的硬件加速，因此需要 CPU 支持 VT ，而且僅限於 Intel CPU。Intel HAXM 與英特爾 Android x86 模擬器映像及官方 Android SDK 管理器結合使用，HAXM 可在支持英特爾虛擬化技術的系統上加快 Android 模擬器的速度。

sdkmanager "extras;intel;Hardware_Accelerated_Execution_Manager"

驗證 Intel HAXM

打開 CMD 輸入如下命令驗證 Intel HAXM

sc query intelhaxm

如果出現問題，比如 “The specified service does not exist as an installed service”，打開 “D:\Protable\Android\Sdk\extras\intel\Hardware_Accelerated_Execution_Manager” 目錄，通過 silent_install.bat 進行安裝

安裝安卓系統鏡像

sdkmanager --install "system-images;android-29;default;x86"

安裝模擬器

sdkmanager "emulator"

將 emulator 添加到環境變量

創建一個安卓模擬器實例

創建一個名爲 “test” 的模擬器實例，後續指令可能需要在 Android/emulator 目錄下執行，或者將其加入環境變量

echo "no" | avdmanager --verbose create avd --force --name "test" --package "system-images;android-29;default;x86" --tag "default" --abi "x86"

啓動安卓模擬器

emulator @test &

按下 f5 並選擇 “Dart&Flutter”。稍等片刻會在模擬器中顯示 Flutter 應用

使用第三方模擬器調試

以逍遙模擬器爲例，並不需要再做什麼配置，只需要打開模擬器，在 VSCode 右下角狀態欄中顯示如下設備