开发体验初探

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

选择你用于编写、编译、执行 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 的构建模式选择

创建应用

  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 的构建模式选择

创建应用

使用 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 的构建模式选择