开发体验初探

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

This page describes how to create a new Flutter app from templates, run it, and experience “hot reload” after you make changes to the app.

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

Select your development tool of choice for writing, building, and running Flutter apps.

创建应用

Create the app

  1. 打开 IDE 并选中 New Flutter Project

    Open the IDE and select New Flutter Project.

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

    Select Flutter, verify the Flutter SDK path with the SDK’s location. Then click Next.

  3. 输入项目名称(例如 my_app)。

    Enter a project name (for example, my_app).

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

    Select Application as the project type. Then click Next.

  5. 点击 完成

    Click Finish.

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

    Wait for Android Studio to create the project.

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

The above commands create a Flutter project directory called my_app that contains a simple demo app that uses Material Components.

运行应用

Run the app

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

    Locate the main Android Studio toolbar:
    Main IntelliJ toolbar

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

    In the target selector, select an Android device for running the app. If none are listed as available, select Tools > AVD Manager and create one there. For details, see Managing AVDs.

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

    Click the run icon in the toolbar, or invoke the menu item Run > Run.

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

After the app build completes, you’ll see the starter app on your device.

Starter app on iOS
Starter app

尝试热重载 (hot reload)

Try hot reload

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

Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

  1. 打开 lib/main.dart

    Open lib/main.dart.

  2. 修改字符串

    Change the string

    'You have pushed the button this many times'

    改为

    to

    'You have clicked the button this many times'
  3. 保存修改: invoke Save All, or click Hot Reload lightning bolt .

    Save your changes: invoke Save All, or click Hot Reload lightning bolt .

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

You’ll see the updated string in the running app almost immediately.

以 profile 模式运行

Profile or release runs

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

So far you’ve been running your app in debug mode. Debug mode trades performance for useful developer features such as hot reload and step debugging. It’s not unexpected to see slow performance and janky animations in debug mode. Once you are ready to analyze performance or release your app, you’ll want to use Flutter’s “profile” or “release” build modes. For more details, see Flutter’s build modes.

创建应用

Create the app

  1. 打开 View > Command Palette

    Invoke View > Command Palette.

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

    Type “flutter”, and select the Flutter: New Project.

  3. 选择 Application

    Select Application.

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

    Create or select the parent directory for the new project folder.

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

    Enter a project name, such as my_app, and press Enter.

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

    Wait for project creation to complete and the main.dart file to appear.

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

The above commands create a Flutter project directory called my_app that contains a simple demo app that uses Material Components.

Run the app

  1. 定位到 VS Code 的状态栏(窗口底部的蓝色栏):
    status bar

    Locate the VS Code status bar (the blue bar at the bottom of the window):

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

    Select a device from the Device Selector area. For details, see Quickly switching between Flutter devices.

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

      If no device is available, and you want to use a device simulator, click No Devices and click Start iOS Simulator to launch a simulator.

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

      To setup a real device, follow the device-specific instructions on the Install page for your OS.

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

    Invoke Run > Start Debugging or press F5.

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

    Wait for the app to launch—progress is printed in the Debug Console view.

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

After the app build completes, you’ll see the starter app on your device.

Starter app on iOS
Starter app

尝试热重载 (hot reload)

Try hot reload

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

Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

  1. 打开 lib/main.dart

    Open lib/main.dart.

  2. 修改字符串

    Change the string

    'You have pushed the button this many times'

    改为

    to

    'You have clicked the button this many times'
  3. 保存修改: invoke Save All, or click Hot Reload lightning bolt .

    Save your changes: invoke Save All, or click Hot Reload lightning bolt .

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

You’ll see the updated string in the running app almost immediately.

以 profile 模式运行

Profile or release runs

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

So far you’ve been running your app in debug mode. Debug mode trades performance for useful developer features such as hot reload and step debugging. It’s not unexpected to see slow performance and janky animations in debug mode. Once you are ready to analyze performance or release your app, you’ll want to use Flutter’s “profile” or “release” build modes. For more details, see Flutter’s build modes.

创建应用

Create the app

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

Use the flutter create command to create a new project:

$ flutter create my_app
$ cd my_app

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

It is also possible to pass other arguments to flutter create, such as the project name (pubspec.yml), the organization name, or to specify the programming language used for the native platform:

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

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

The command creates a Flutter project directory called my_app that contains a simple demo app that uses Material Components.

运行应用

Run the app

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

    Check that an Android device is running. If none are shown, follow the device-specific instructions on the Install page for your OS.

    $ flutter devices
    
  2. 使用下面指令运行应用:

    Run the app with the following command:

   $ flutter run
  1. 在命令行窗口输入 r

    Type r in the terminal window.

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

After the app build completes, you’ll see the starter app on your device.

Starter app on iOS
Starter app

尝试热重载 (hot reload)

Try hot reload

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

Flutter offers a fast development cycle with Stateful Hot Reload, the ability to reload the code of a live running app without restarting or losing app state. Make a change to app source, tell your IDE or command-line tool that you want to hot reload, and see the change in your simulator, emulator, or device.

  1. 打开 lib/main.dart

    Open lib/main.dart.

  2. 修改字符串

    Change the string

    'You have pushed the button this many times'

    改为

    to

    'You have clicked the button this many times'
  3. 保存修改.

    Save your changes.

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

You’ll see the updated string in the running app almost immediately.

以 profile 模式运行

Profile or release runs

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

So far you’ve been running your app in debug mode. Debug mode trades performance for useful developer features such as hot reload and step debugging. It’s not unexpected to see slow performance and janky animations in debug mode. Once you are ready to analyze performance or release your app, you’ll want to use Flutter’s “profile” or “release” build modes. For more details, see Flutter’s build modes.