使用 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 右下角狀態欄中顯示以下設備

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

也能夠經過 adb 連接模擬器 IP 地址，好比：

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

參考資料

• https://flutter.dev/community/china
• https://developer.android.com/studio/
• https://developer.android.com/studio/run/emulator-commandline