必须同时安装dart和flutter两个扩展,且先装dart再装flutter,每次安装后需完全重启vscode;还需在settings.json中正确配置dart.fluttersdkpath绝对路径,否则无法调用命令、检测设备或热重载。

VSCode 要能真正跑起 Flutter 项目,光装 Dart 扩展远远不够——必须同时装 Dart 和 Flutter 两个扩展,且顺序、路径、环境变量三者缺一不可。
为什么只装 Dart 扩展会失败
单独安装 Dart 扩展后,VSCode 只能识别 .dart 语法、提供基础补全,但完全无法调用 flutter run、看不到设备列表、热重载按钮灰色、Flutter: New Project 命令不出现。这是因为 Flutter 扩展才是负责集成 CLI、设备检测、调试协议和 Widget Inspector 的核心模块,它依赖 Dart 扩展但不被其替代。
-
Flutter扩展未启用时,状态栏右下角不会显示设备名(如iPhone 15或Android SDK built for x86_64) - 按 Cmd+Shift+P 输入
Flutter: Run Flutter Doctor,命令直接消失或报“command not found” - 即使
flutter doctor终端里全绿,VSCode 内部仍提示Flutter SDK not found
安装顺序与重启时机很关键
必须先装 Dart,再装 Flutter,且每次安装后都要完整重启 VSCode(不是重载窗口),否则扩展间依赖可能未激活。
- 在扩展市场搜索
Dart Code→ 点击“Install”,等待完成 - 搜索
Flutter→ 确认发布者是Dart-Code→ 点击“Install” - 关闭所有 VSCode 窗口,重新打开;不要用
Developer: Reload Window替代 - 打开任意
.dart文件,确认右下角显示Dart语言模式,且无红色波浪线
dart.flutterSdkPath 配置错误是最常见卡点
VSCode 不会自动继承系统 PATH 中的 flutter 命令,必须显式告诉它 SDK 在哪。路径错一位、多一个空格、用了中文用户名,都会导致后续全部功能瘫痪。
- 打开设置 → 搜索
dart.flutterSdkPath→ 点击“Edit in settings.json” - 填入绝对路径,macOS 示例:
"dart.flutterSdkPath": "/Users/yourname/development/flutter"(注意:结尾不加/bin) - Windows 用户路径中反斜杠要写成双反斜杠,如:
"dart.flutterSdkPath": "C:\src\flutter" - 保存后,按 Cmd+Shift+P 运行
Flutter: Run Flutter Doctor,看输出是否和终端里一致
flutter doctor 全绿 ≠ VSCode 就能用
终端里 flutter doctor -v 显示全 ✅,只代表 CLI 工具链就绪;VSCode 是否能用,取决于它能否独立定位 SDK 并加载 Dart 分析服务器。很多用户卡在“设备列表为空”“热重载按钮不可点”,问题根源都在 VSCode 自己没连上 SDK,而不是 Android Studio 或 Xcode 没配好。
如果已确认路径正确、扩展装齐、VSCode 重启过,但依然报 Target of URI doesn't exist: 'package:flutter/material.dart',优先检查 pubspec.yaml 是否在项目根目录,以及是否用 VSCode **打开整个文件夹**(不是单个 main.dart 文件)——这是新手最常忽略的操作细节。











