使用 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 右下角状态栏中显示如下设备