使用 VSCode 搭建 Flutter環境

guangzan發表於2021-07-20
VSCodeFlutter

概述

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

安裝 Git

點選這裡 下載並安裝 Git

配置 Java 環境

下載和安裝 JDK

點選下載 Java SE Development Kit 8

image

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

配置環境變數

搜尋框中輸入 “env” 開啟 “編輯系統環境變數配置”

image

image

image

JAVA_HOME

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

image

CLASSPATH

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

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

image

新增到系統變數

image

image

image

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

image

通過點選確定將所有視窗關閉

測試

開啟 CMD 輸入 “java -version”

image

輸入 “javac”

image

配置 Android 環境

安裝 Command line tools

下載和解壓

下載 Command line tools

image

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

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

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

image

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

command-tools

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

image

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 加入系統環境變數

image

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

image

ANDROID_SDK_ROOT

  • 變數名：ANDROID_SDK_ROOT
  • 變數值：D:\Protable\Android\Sdk

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

image

下載和安裝 Flutter SDK

配置 Flutter 國內映象

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

image

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 列表，並下載

image

解壓到 D:\Protable\flutter

image

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

配置 Flutter SDK 環境變數

image

開啟 cmd 輸入 “flutter” 檢測環境變數：

image

接受許可協議

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

flutter doctor --android-licenses

檢測 flutter 開發環境

在 cmd 中輸入如下命令：

flutter doctor

image

配置 VSCode

點選這裡 下載並安裝 VSCode

image

在外掛中搜尋 Flutter 並安裝

image

建立 Flutter 專案

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

image

輸入專案名稱按下回車即可建立專案

image

除錯

使用瀏覽器除錯

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

image

按下 f5 並選擇 “Dart&Flutter”

image

稍等片刻即可自動開啟 Chrome

image

使用真機除錯

首先需要進入 “開發者選項” 將手機的 “允許 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 連結的手機型號

image

按下 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

image

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

image

安裝安卓系統映象

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

安裝模擬器

sdkmanager "emulator"

將 emulator 新增到環境變數

image

建立一個安卓模擬器例項

建立一個名為 “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 應用

image

使用第三方模擬器除錯

以逍遙模擬器為例，並不需要再做什麼配置，只需要開啟模擬器，在 VSCode 右下角狀態列中顯示如下裝置

image

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

image

也可以通過 adb 連結模擬器 IP 地址，比如：

  • 夜神模擬器 adb connect 127.0.0.1:62001
  • MuMu 模擬器 adb connect 127.0.0.1:7555

參考資料

相關文章