目录

在 VS Code 里开发 Flutter 应用

目录

安装和配置

#

根据 编辑工具设定 的指引来安装 Dart 和 Flutter 扩展（也叫做插件）。

更新扩展程序

#

扩展的更新会定期发布。默认情况下，当有可用的更新时 VS Code 会自动更新扩展。

手动安装更新：

  1. 点击侧边栏的 Extensions 按钮。

  2. 如果 Flutter 扩展显示有可用更新，点击更新按钮，然后重载。

  3. 重启 VS Code。

创建项目

#

有几种方式创建一个新项目。

新建项目

#

通过 Flutter 入门应用模板新建 Flutter 项目：

  1. 打开 View > Command Palette...。

    你也可以按下 Ctrl / Cmd + Shift + P。

  2. 输入 flutter。

  3. 选择 Flutter: New Project 命令。

  4. 按下 Enter。

  5. 选择 Application。

  6. 按下 Enter。

  7. 选择 项目地址。

  8. 输入你想要的 项目名。

从现有源代码打开项目

#

To open an existing Flutter project:

  1. Go to File > Open.

    You can also press Ctrl / Cmd + O

  2. Browse to the directory holding your existing Flutter source code files.

  3. Click Open.

编写代码及查看问题

#

Flutter 扩展执行代码分析，它提供：

  • 语法高亮。

  • 基于丰富输入分析的代码补全。

  • 导航到类型声明（Go to Definition 或 F12）

    • 前往 Go > Go to Definition。

    • 你也可以按下 F12。

  • 查找类型引用

    • 按下 Shift + F12。

  • 查看所有当前代码问题

    • 前往 View > Problems。

    • 你也可以按下 Ctrl / Cmd + Shift + M。

    • 所有问题分析都会在 Problems 面板展示：
      Problems pane

运行和调试

#

在 IDE 主窗口点击 Run > Start Debugging 或按 F5 开启调试。

选择目标设备

#

当一个 Flutter 项目在 VS Code 中打开，你会在状态栏看到一些 Flutter 特有项，包括 Flutter SDK 版本和设备名称（或者无设备信息）：

VS Code status bar

Flutter 扩展会自动选择上次连接的设备。然而，如果你有多个设备/模拟器连接，点击状态栏的 device 查看屏幕顶部的选择列表。选择你要用来运行或调试的设备。

无断点运行

#

在 IDE 主窗口点击 Run > Start Without Debugging。

或者按 Ctrl + F5。

断点运行

#

  1. 如果需要，在源代码中设置断点。

  2. 在 IDE 主窗口点击 Run > Start Debugging 或按 F5。 Debug console

    • 左侧的调试侧边栏显示堆栈帧和变量。

    • 底部的调试控制台面板显示输出的日志详情。

    • 调试基于默认的配置。也可以通过点击调试侧边栏顶部的齿轮创建 launch.json 文件自定义调试。你可以修改里面的值。

以调试 (debug)、性能 (profile) 或发布 (release) 模式运行应用

#

Flutter 提供了很多种不同的构建模式运行你的应用，更多内容请参考文档 Flutter 的构建模式。

  1. 打开 VS Code 里的 launch.json 文件

    如果你没有 launch.json 文件。

    1. 前往 View > Run。

      你也可以按下 Ctrl / Cmd + Shift + D。

      Run and Debug 面板会展示。

    2. 点击 create a launch.json file 创建。

  2. 在 configurations 部分，修改 flutterMode 属性值为你想要的构建模式即可。

    举个例子，如果你希望在调试模式下运行，你的 launch.json 文件应该类似下面这样：

    json
    "configurations": [
  {
    "name": "Flutter",
    "request": "launch",
    "type": "dart",
    "flutterMode": "debug"
  }
]

  3. 通过 Run 面板运行你的应用。

快速编辑和刷新开发周期

#

Flutter 为开发者提供了一流的开发体验，通过 有状态的热重载 特性使你在几乎修改代码的同时就能看到变化。详情请看 使用热重载。

进阶调试

#

以下的调试指南可能会对你有帮助：

可视化布局问题调试

#

在调试会话期间，命令面板 和 Flutter inspector 会添加一些额外的调试命令，包括：

切换 Baseline 绘制 Baseline painting icon
每个 RenderBox 在底部绘制一条线。

切换重绘 Rainbow Repaint rainbow icon
重新绘制时在图层上改变颜色。

切换慢模式横幅 Slow animations icon
减慢动画以启用视觉检查。

切换 debug 模式横幅显示 Debug mode banner icon
在运行调试构建时隐藏 debug 模式的横幅 (banner)。

调试外部库

#

默认情况下，Flutter 扩展禁止调试外部库。启用步骤：

  1. 选择 Settings > Extensions > Dart Configuration

  2. 勾选 Debug External Libraries 选项。

Flutter 代码编辑提示

#

如果你有其他我们应该提供的代码提示建议，请 告诉我们！

代码辅助和快速修复

#

代码辅助功能是特定代码标识符相关的代码修改。当光标放在 Flutter widget 上时，黄色灯泡图标会指示可用的修改，可以通过点击灯泡进行修改，或者使用快捷键 Ctrl+. (macOS 用 Cmd+.)，如图所示：

Code assists

You can also press Ctrl / Cmd + .

快速修复跟辅助类似，当一段代码有错误并且可以辅助修正时才会显示。

Widget 嵌套辅助

当你有个 widget 想包装进一个容器 widget 时，例如你想把 widget 放入一个 Row 或者 Column。

Widget 列表嵌套辅助

和上面的辅助类似，但它嵌套的是一个 widget 的列表，而不是单个的 widget。

child 和 children 转换辅助

将 child 转换成 children，并且把参数值写进一个 list。

StatelessWidget 到 StatefulWidget 的转换
创建 State 类并将代码移动过去，可以将 StatelessWidget 的实现更改为 StatefulWidget。

代码片段

#

代码片段可以用来加速输入通用类型代码段。通过输入前缀来调用，然后从代码完成窗口中选择：

Snippets

Flutter 扩展包括以下片段：

  • 前缀 stless：创建一个 StatelessWidget 子类。

  • 前缀 stful：创建一个 StatefulWidget 子类，并且和 State 子类关联。

  • 前缀 stanim：创建一个 StatefulWidget 子类，并且把包含字段初始化的 State 子类和一个 AnimationController 关联。

The Dart extension includes the following snippets:

Prefix Description Code Example
main Insert a main function, used as an entry point. void main(List<String> args) { }
try Insert a try/catch block. try { } catch (e) { }
if Insert an if statement. if (condition) { }
ife Insert an if statement with an else block. if (condition) { } else { }
switch Insert a switch statement. switch (variable) { case value1: break; case value2: break; default: }
for Insert a for loop. for (var i = 0; i < 10; i++) { }
fori Insert a for-in loop. for (var item in list) { }
while Insert a while loop. while (condition) { }
do Insert a do-while loop. do { } while (condition);
fun Insert a function definition. void myFunction(String name) { }
class Insert a class definition. class MyClass { }
typedef Insert a typedef. typedef MyFunction = void Function(String);
test Insert a test block. test('My test description', () { });
group Insert a test group block. group('My test group', () { });

你也可以通过在 命令面板 执行 Configure User Snippets 来自定义片段。

键盘快捷键

#


调试期间，在 调试工具栏 点击 热重载 (Hot Reload) 按钮。

你也可以按下 Ctrl + F5 （macOS 为 Cmd + F5）。

键位绑定可以在 命令面板 中使用 Open Keyboard Shortcuts 命令进行调整。

热重载和热重启

#

热重载的工作原理是将更新后的代码注入 Dart VM（虚拟机）。不仅包括添加新类，还包括添加方法和字段到已有的类中。但有些类型的代码是无法被热重载的：

  • 全部变量的初始化

  • 静态变量的初始化

  • 应用的 main() 方法

对于这些更改，你无需结束调试过程而直接热重启 (hot restart) 你的应用。要执行热重启，执行 命令面板 的 Flutter：Hot Restart 命令，

你也可以按下 Ctrl + Shift + F5 （在 macOS 上使用 Cmd + Shift + F5）。

故障排除

#

已知问题和反馈

#

所有已知 bug 在这个 issue 列表中记录： Dart 和 Flutter 扩展 GitHub issue 追踪。我们非常欢迎 bugs/issues 和特性请求的反馈。

在提交新 issue 之前：

  • 在 issue 列表中查找看该问题是否已被记录。

  • 确保你已经 更新 最新版本插件。

提交新 issue 时，请包含 flutter doctor 输出。

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-11-02。 查看文档源码 或者 为本页面内容提出建议。