使用VS Code 开发Flutter


使用VS Code 开发Flutter

使用VS Code 开发Flutter

安装 VS Code

下载地址: https://code.visualstudio.com/

安装 Flutter 和 Dart 插件

  1. 打开 VS Code。
  2. 打开 查看 > 命令面板…。
  3. 输入 “install”,然后选择 扩展: 安装扩展。
  4. 在扩展搜索输入框中输入 “flutter”,然后在列表中选择 Flutter 并单击 安装。此过程中会自动安装必需的 Dart 插件。
  5. 点击 重新加载 以重新启动 VS Code。

通过 Flutter Doctor 命令验证是否安装成功

  1. 打开 查看 > 命令面板…。
  2. 输入 “doctor”,选择 Flutter: Run Flutter Doctor。
  3. 打开 输出 面板查看是否有错误。

创建应用

  1. 打开 View > Command Palette。
  2. 输入 “flutter”,选择 Flutter: New Project。
  3. 输入项目名称,比如 myapp,然后点 Enter
  4. 创建或者选择新项目的父文件夹。
  5. 稍等一下项目创建成功,目录中就会生成 main.dart 文件。

运行程序

  1. 找到 VS Code 的状态栏(窗口底部蓝色的条)
  2. 从 Device Selector 里选择一个设备。更多详细内容,请参见 在 Flutter 设备中快速切换。如果没有可用设备而且你也打算用模拟器,点击 No Devices 然后打开一个模拟器。如果要设置一台实际硬件设备,请根据操作系统在 安装 页面按照相关设备配置步骤进行操作
  3. 点击右上角一个齿轮状的设置按钮— gear,有一个红色或者橘色的点,它在 DEBUG 文本框旁边,选择 Flutter。选择调试配置:选择现在连接的设备,或者模拟器(如果没有,请创建)。
  4. 选择 Debug > 开始 Debugging 或者按F5。
  5. 当应用启动以后— 处理进度会出现在 Debug Console 页面中。

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

使用VS Code 开发Flutter

尝试热重载 (hot reload)

Flutter 通过 热重载 提供快速开发周期,该功能支持应用程序在运行状态下重载代码而无需重新启动应用程序或者丢失程序运行状态。修改一下代码,然后告诉IDE或者命令行工具你需要热重载,然后看一下模拟器或者设备上应用的变化

  1. 打开 lib/main.dart。
  2. 修改字符串
<code>You have pushed the button this many times
/<code>

改为

<code>You have clicked the button this many times
/<code>
  1. 打开 File > Save All, 或者点击 Hot Reload (绿色的带有圆形箭头的按钮)。
    保存修改

你会发现修改后的字符串几乎马上出现在正在运行的应用程序上。

尝试其他平台运行应用

Web

使用VS Code 开发Flutter

使用VS Code 开发Flutter

Android

使用VS Code 开发Flutter

使用VS Code 开发Flutter


分享到:


相關文章: