使用VSCode学习和开发Flutter应用

VSCode是本地高效开发Flutter应用的轻量选择，需配置Flutter SDK、安装Dart/Flutter插件、创建项目、启用热重载与断点调试，并通过launch.json支持多平台调试。

如果您希望在本地环境中高效学习和开发Flutter应用，VSCode是一个轻量且功能强大的选择。它通过插件扩展提供了代码补全、调试支持、热重载集成等关键能力。以下是具体配置与使用步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装Flutter SDK与配置环境变量

Flutter SDK是开发的基础运行时，必须正确下载并加入系统路径，否则VSCode无法识别Flutter命令及设备连接状态。

1、访问 https://flutter.dev/docs/get-started/install 下载对应 macOS 的 Flutter SDK 压缩包。

2、解压至用户主目录下的 /Users/用户名/flutter 路径。

3、在终端中编辑 ~/.zshrc 文件，添加以下两行：

export PATH=$PATH:/Users/用户名/flutter/bin

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

4、执行 source ~/.zshrc 使配置生效，随后运行 flutter doctor 验证安装结果。

二、安装VSCode及Dart与Flutter插件

VSCode本身不内置Flutter支持，需通过官方维护的扩展提供语言服务、调试器和项目模板生成能力。

1、前往 https://code.visualstudio.com/ 下载并安装最新版 VSCode。

2、启动 VSCode，点击左侧扩展图标（或按 Cmd+Shift+X），搜索 Dart，安装由 Dart Code 团队发布的 Dart 扩展。

3、在同一扩展面板中搜索 Flutter，安装同团队发布的 Flutter 扩展（该扩展会自动依赖并启用 Dart 扩展）。

4、重启 VSCode，打开命令面板（Cmd+Shift+P），输入 Flutter: New Project 测试插件是否响应。

三、创建并运行首个Flutter项目

使用VSCode内置命令可快速初始化标准项目结构，并避免手动执行 flutter create 命令可能出现的路径或权限问题。

1、按下 Cmd+Shift+P 打开命令面板，输入并选择 Flutter: New Project。

2、在弹出的输入框中键入项目名称（如 my_first_app），回车确认。

3、选择项目保存位置（建议为用户文档目录下的独立文件夹），等待模板生成完成。

4、项目生成后，VSCode 自动打开该文件夹，点击右下角状态栏中的 No Device，选择已连接的 iOS 模拟器或 Android 设备。

Wordware

Wordware是一个自然语言编程工具，使任何人都可以开发、迭代和部署有用的AI应用程序。

287

查看详情

5、按下 Cmd+F5 启动调试，或点击侧边栏“运行和调试”面板中的绿色三角形按钮。

四、启用热重载与调试断点

热重载是Flutter开发的核心效率特性，VSCode通过调试会话实时注入代码变更，无需重启应用；断点则用于逐行分析逻辑执行流程。

1、确保当前处于 lib/main.dart 文件中，点击左侧行号区域设置断点（红色圆点）。

2、按下 Cmd+F5 启动调试会话，应用启动后会在断点处暂停。

3、修改某段 Widget 构建逻辑（例如将 'Hello World' 改为 'Hello VSCode'）。

4、按下 Cmd+S 保存文件，观察模拟器界面立即刷新，且控制台输出 Performing hot reload... 日志。

五、配置launch.json实现多目标调试

默认调试配置仅面向默认设备，若需指定iOS模拟器型号、Android真机或Web平台，需手动定义 launch.json 配置项以覆盖默认行为。

1、在项目根目录下依次展开 .vscode > launch.json（若不存在则点击运行面板右上角齿轮图标生成）。

2、将 configurations 数组中已有对象替换为以下内容：

{

"name": "Flutter Web",

"request": "launch",

"type": "dart",

"flutterMode": "debug",

"args": ["-d", "chrome"]

}

3、保存文件后，在调试选择器中切换至 Flutter Web，再次按 Cmd+F5 即可在 Chrome 中运行。

4、如需调试特定 iOS 模拟器，将 args 中的 "chrome" 替换为 "iPhone 15"（需确保该模拟器已通过 Xcode 创建并运行）。

以上就是使用VSCode学习和开发Flutter应用的详细内容，更多请关注php中文网其它相关文章！