使用VS Code创建第一个Flutter工程

一、前言

你可以使用任意文本编辑器,再结合命令行工具来开发 Flutter 应用。然而,我们推荐使用本文接下来介绍的编辑器插件以获取更好的开发体验。这些插件提供了代码补全代码高亮widget 辅助编辑的功能,以及为项目的运行和调试提供支持等。

推荐的开发工具有 VS CodeAndroid StudioIntelliJ。 本文着重介绍使用VS Code 如何进行Flutter应用开发

二、VS Code的安装

VS Code 是一个可以运行和调试 Flutter 的轻量级编辑器。 VS Code的稳定版本,点此下载

下载完成后,像安装其他软件一样进行安装即可。

三、安装 Flutter 和 Dart 插件

  • 打开 VS Code。

  • 打开 View > Command Palette… (查看 > 命令面板)。

  • 输入「install」,然后选择 Extensions: Install Extensions

  • 在扩展搜索输入框中输入「flutter」,然后在列表中选择 Flutter 并单击 Install。此过程中会自动安装必需的 Dart 插件。

  • 点击 Reload to Activate 以重新启动 VS Code。

四、创建第一个Flutter应用

  • 打开 View > Command Palette (查看 > 命令面板)。

  • 输入「flutter」,选择 Flutter: New Project

  • 选择 Application

  • 新建或选择新项目将存放的上层目录。

  • 输入项目名称,例如 my_app,并点击 Enter。

  • 等待项目创建完成,并且 main.dart 文件展现在编辑器中。

如果你的 VSCode 运行时,Flutter 正在进行初始化安装,你需要在 SDK 安装完成后重启 VSCode 使其可以检测到 Flutter SDK。

应用程序的代码存放在 lib/main.dart 中。想要查看每块代码具体的作用,请查看文件中的对应注释。

五、 运行App

  • 定位到 VS Code 的状态栏(窗口底部的蓝色栏):

在这里插入图片描述

  • Device Selector 区域选择一个设备。

    如果没有可用的设备,而同时你想使用模拟器,点击 No Devices 并点击 Start iOS Simulator 启动一个模拟器。

    在这里插入图片描述

点击 VS Code 的 No Devices 时,你可能不会看到 Start iOS Simulator 的选项。如果你在使用 macOS,请在终端中执行以下命令:

  open -a simulator

在 Windows 或 Linux 上你无法启动 iOS 模拟器。

  • 运行 Run > Start Debugging 或按下 F5

  • 等待应用启动——启动进度会在 Debug Console 中展示。

当应用编译完成后,就可以在设备上运行这个起步应用了。

在这里插入图片描述

六、参考

https://flutter.cn/docs/get-started/editor?tab=vscode
https://flutter.cn/docs/get-started/test-drive?tab=vscode

posted @ 2023-01-31 09:30  reyzhang  阅读(469)  评论(0编辑  收藏  举报