0

0

怎样在vscode中配置Flutter移动开发环境【教程】

幻影之瞳

幻影之瞳

发布时间:2026-01-17 21:37:03

|

311人浏览过

|

来源于php中文网

原创

VS Code 需配合 Flutter SDK 和 Dart/Flutter 插件才能开发 Flutter 应用;必须正确配置 flutter 命令的 PATH、ANDROID_HOME 等环境变量,安装官方 Dart 与 Flutter 插件,并通过 flutter create 创建项目验证全流程。

怎样在vscode中配置flutter移动开发环境【教程】

VS Code 本身不自带 Flutter 开发能力,必须通过插件 + 命令行工具链协同工作;直接装插件但没配好 flutter 命令或 ANDROID_HOME,项目能打开却无法运行、调试失败、设备列表为空——这是最常卡住的地方。

安装 Flutter SDK 并确保 flutter 命令全局可用

VS Code 的 Dart/Flutter 插件依赖系统 PATH 中的 flutter 可执行文件。它不帮你装 SDK,也不读取你解压在桌面的 flutter 文件夹路径。

  • Flutter 官网下载对应系统的 SDK zip 包(不是 exe/msi 安装器),解压到无中文、无空格路径,例如 C:\src\flutter(Windows)或 ~/development/fluttermacOS/Linux)
  • flutter/bin 加入系统 PATH:Windows 在「环境变量」中编辑 Path,macOS/Linux 在 ~/.zshrc~/.bash_profile 中追加 export PATH="$PATH:/path/to/flutter/bin"
  • 终端中执行 flutter --versionflutter doctor -v,确认输出正常;若提示 command not found,说明 PATH 没生效,重启 VS Code 或整个终端

安装 Dart 和 Flutter 插件(仅这两个必要)

VS Code 扩展市场里名字带 “Flutter” 的插件有多个,只装官方维护的那两个,其余如 “Flutter Snippets”“Quick Flutter” 属于锦上添花,非必需。

  • 在 VS Code 扩展面板搜索并安装:Dart(由 Dart Team 发布)和 Flutter(由 Flutter Team 发布)
  • 安装后重启 VS Code;打开一个 .dart 文件,状态栏右下角应显示 Dart SDK 版本,比如 Dart SDK 3.4.3
  • 如果状态栏没反应,或点击调试按钮时报 No debug adapter found for flutter,大概率是 flutter 命令不可达,回退上一步检查 PATH

配置 Android 开发环境(iOS 需 macOS)

flutter doctor 报红最多的通常是 Android 工具链。VS Code 不参与构建 APK,但它调用 flutter run,而后者依赖 Android SDK、JDK、adb 等命令是否就绪。

Krea AI
Krea AI

多功能的一站式AI图像生成和编辑平台

下载
  • Android Studio 不是必须安装,但推荐用它的一键安装方式获取完整 SDK:安装时勾选 Android SDK Command-line Tools(关键!)和 Android SDK Platform-Tools
  • 设置环境变量:ANDROID_SDK_ROOT 指向 Android SDK 根目录(如 C:\Users\XXX\AppData\Local\Android\Sdk),同时确保 platform-toolsemulator 在 PATH 中
  • 运行 flutter doctor --android-licenses 接受全部协议;若卡住,尝试先执行 sdkmanager --licenses
  • 连接真机或启动模拟器后,flutter devices 应列出设备;VS Code 调试时左下角设备选择器才能出现可选项

创建并运行第一个项目验证全流程

别急着打开旧项目。用 CLI 创建新项目,能绕过缓存、权限、路径编码等隐藏问题,是最可靠的验证方式。

  • 终端执行:
    flutter create myapp
    cd myapp
    flutter run
    确保能在命令行成功运行
  • 然后用 VS Code 打开 myapp 文件夹(不是单个 .dart 文件),按 Ctrl+F5(Windows/Linux)或 Cmd+R(macOS)启动调试
  • 若弹出 “No device connected”,检查设备是否已授权 USB 调试,或模拟器是否已启动且状态为 runningadb devices 必须看到设备
  • 首次运行可能耗时较长(编译引擎、下载依赖),耐心等待;后续热重载(Ctrl+SR)会快很多

最容易被忽略的是:VS Code 启动时不会自动重载 PATH 变更,改完环境变量必须彻底关闭所有 VS Code 窗口再重新打开;另外 Windows 用户若用 Git Bash 或 PowerShell 启动 VS Code,PATH 可能和系统不一致,建议从开始菜单启动。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
自建git服务器
自建git服务器

git服务器是目前流行的分布式版本控制系统之一,可以让多人协同开发同一个项目。本专题为大家提供自建git服务器相关的各种文章、以及下载和课程。

979

2023.07.05

git和svn的区别
git和svn的区别

git和svn的区别:1、定义不同;2、模型类型不同;3、存储单元不同;4、是否拥有全局版本号;5、内容完整性不同;6、版本库不同;7、克隆目录速度不同;8、分支不同。php中文网为大家带来了git和svn的相关知识、以及相关文章等内容。

581

2023.07.06

git撤销提交的commit
git撤销提交的commit

Git是一个强大的版本控制系统,它提供了很多功能帮助开发人员有效地管理和控制代码的变更,本专题为大家提供git 撤销提交的commit相关的各种文章内容,供大家免费下载体验。

275

2023.07.24

git提交错误怎么撤回
git提交错误怎么撤回

git提交错误撤回的方法:git reset head^:撤回最后一次提交,恢复到提交前状态。git revert head:创建新提交,内容与之前提交相反。git reset :使用提交的 sha-1 哈希撤回指定提交。交互式舞台区:标记要撤回的特定更改,然后提交,排除已撤回更改。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

568

2024.04.09

git怎么对比两个版本的文件内容
git怎么对比两个版本的文件内容

要对比两个版本的 git 文件,请使用 git diff 命令:git diff 比较工作树和暂存区之间的差异。git diff 比较两个提交或标签之间的差异。git diff 输出显示差异块,其中 + 表示添加的行,- 表示删除的行, 表示修改的行。可使用 gitkraken、meld、beyond compare 等可视化工具更直观地查看差异。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

533

2024.04.09

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1496

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1170

2023.07.27

windows照片无法显示
windows照片无法显示

当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

835

2023.08.01

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 10.6万人学习

Git 教程
Git 教程

共21课时 | 4.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号