开发体验初探

本页面讲解如何通过模板实现一个 Flutter 应用，执行并且在修改程序之后触发“热重载 (hot reload)”功能。

选择你用于编写、编译、执行 Flutter 应用的开发环境吧。

创建应用

  1. 打开 View > Command Palette。

  2. 输入「flutter」，选择 Flutter: New Project。

  3. 选择 Application。

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

  5. 输入项目名称，例如 my_app，并点击 Enter。

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

该命令会创建一个名为 myapp，里面包含一个简单的示例程序，里面用到了 Material 组件。

Run the app

  1. 定位到 VS Code 的状态栏（窗口底部的蓝色栏）：
    status bar

  2. 从 Device Selector 区域选择一个设备。更多信息，参考 快速切换用于 Flutter 的设备。

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

    • 想要配置真机用于调试，请查看你正在使用的系统的对应 安装 设备指导。

  3. 运行 Run > Start Debugging 或按下 F5。

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

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

Starter app on iOS
Starter app

尝试热重载 (hot reload)

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

  1. 打开 lib/main.dart。

  2. 修改字符串

    'You have pushed the button this many times'

    改为

    'You have clicked the button this many times'

  3. 保存修改: invoke Save All, or click Hot Reload lightning bolt .

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

以 profile 模式运行

截止目前文档所示内容，你的应用应该运行在调试 (debug) 模式中，这个模式意味着在更大的性能开销下实现了更快速的开发效率，比如热重载功能的启用，因此你可能要面临较差质量的动画效果。当你准备分析应用性能或要打包发布的时候，你可能需要 Flutter 的 profile 或者 release 构建，相关文档，请查阅文档： Flutter 的构建模式选择。

创建应用

  1. 打开 IDE 并选中 New Flutter Project。

  2. 选择 Flutter，验证 Flutter SDK 的路径。完成后选择 Next。

  3. 输入项目名称（例如 my_app）。

  4. 选择 Application 的项目类型，完成后选择 Next。

  5. 点击 完成。

  6. 等待 Android Studio 完成项目的创建。

上述步骤会创建名为 my_app 的 Flutter 项目的文件夹，它是一个使用了 Material 组件 的简单 demo。

运行应用

  1. 定位到 Android Studio 的工具栏：
    Main IntelliJ toolbar

  2. 在 target selector 中，选择一个用于运行应用的 Android 设备。如果列表为空，选择 Tools > AVD Manager 创建一个虚拟机。更多细节可以参考 管理 AVD 虚拟机。

  3. 点击工具栏中的运行按钮，或者点击菜单栏中的 Run > Run。

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

Starter app on iOS
Starter app

尝试热重载 (hot reload)

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

  1. 打开 lib/main.dart。

  2. 修改字符串

    'You have pushed the button this many times'

    改为

    'You have clicked the button this many times'

  3. 保存修改: invoke Save All, or click Hot Reload lightning bolt .

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

以 profile 模式运行

截止目前文档所示内容，你的应用应该运行在调试 (debug) 模式中，这个模式意味着在更大的性能开销下实现了更快速的开发效率，比如热重载功能的启用，因此你可能要面临较差质量的动画效果。当你准备分析应用性能或要打包发布的时候，你可能需要 Flutter 的 profile 或者 release 构建，相关文档，请查阅文档： Flutter 的构建模式选择。

创建应用

使用 flutter create 命令来创建新的工程：

$ flutter create my_app
$ cd my_app

你可以在运行 flutter create 时传递其他参数，例如项目名 (pubspec.yaml)、组织名或者指定原生平台使用的语言：

$ flutter create --project-name my_app --org dev.flutter --android-language java --ios-language objc my_app
$ cd my_app

该命令会创建一个名为 myapp，里面包含一个简单的示例应用，里面用到了 Material 组件。

运行应用

  1. 检查一下 Android 设备是否已经正常运行。如果应用未显示，请在 安装 页面里，根据你的操作系统按照设备相关说明进行操作。

    $ flutter devices

  2. 使用下面指令运行应用：

   $ flutter run

  1. 在命令行窗口输入 r

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

Starter app on iOS
Starter app

尝试热重载 (hot reload)

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

  1. 打开 lib/main.dart。

  2. 修改字符串

    'You have pushed the button this many times'

    改为

    'You have clicked the button this many times'

  3. 保存修改.

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

以 profile 模式运行

截止目前文档所示内容，你的应用应该运行在调试 (debug) 模式中，这个模式意味着在更大的性能开销下实现了更快速的开发效率，比如热重载功能的启用，因此你可能要面临较差质量的动画效果。当你准备分析应用性能或要打包发布的时候，你可能需要 Flutter 的 profile 或者 release 构建，相关文档，请查阅文档： Flutter 的构建模式选择。