开发体验初探

本页面讲解如何通过模板实现一个 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,选择 新 Flutter 项目 (Start a new Flutter project).

    Open the IDE and select Start a new Flutter project.

  2. 选择 Flutter 应用程序 作为项目类型,然后点 下一步

    Select Flutter Application as the project type. Then click Next.

  3. 确认 Flutter SDK 路径 区域所示路径是正确的 SDK 路径。如果你还没有安装 SDK,需要先进行安装,选择 Install SDK…

    Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank).

  4. 输入项目名称(比如 ‘myapp’), 然后点击下一步

    Enter a project name (for example, myapp). Then click Next.

  5. 点击 完成

    Click Finish.

  6. 待 Android Studio 安装 SDK 后,创建项目。

    Wait for Android Studio to install the SDK and create the project.

上面的步骤会创建一个叫做 myapp 的 Flutter 项目目录,里面会包含一个用到 Material 组件 的简单的示例程序。

The above commands create a Flutter project directory called myapp 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:

  2. 目标选择器,选择一个 Android 设备来运行程序。如果列表里没有可用设备,选择 **工具 > Android > AVD Manager 然后在这个窗口中创建一个新的虚拟机。更多详细介绍,参见 管理 AVDs

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

  3. 点击工具栏中的 Run 图标,或者在菜单中选择 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. 保存修改

    Save your changes : invoke Save All, or click Hot Reload offline_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. 输入项目名称,比如 myapp,然后点 Enter

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

  4. 创建或者选择新项目的父文件夹。

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

  5. 稍等一下项目创建成功,目录中就会生成 main.dart 文件。

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

上面的操作会创建一个叫做 myapp 的 Flutter 项目目录该目录中包含一个用到 Material Components简单的示例程序。

The above commands create a Flutter project directory called myapp 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 然后打开一个模拟器。

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

    • 如果要设置一台实际硬件设备,请根据操作系统在 安装 页面按照相关设备配置步骤进行操作

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

  3. 点击右上角一个齿轮状的设置按钮 gear,有一个红色或者橘色的点,它在 DEBUG 文本框旁边,选择 Flutter。选择调试配置:选择现在连接的设备,或者模拟器(如果没有,请创建)。

    Press the Settings button - a cog icon gear on the top right (now marked with a red or orange indicator) next to the DEBUG text box that reads No Configuration. Select flutter. And choose the debug configuration: To create your emulator if it is closed or to run the emulator or device that is now connected.

  4. 选择 Debug > 开始 Debugging 或者按F5

    Invoke Debug > Start Debugging or press F5.

  5. 当应用启动以后— 处理进度会出现在 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. 打开 File > Save All, 或者点击 Hot Reload offline_bolt (绿色的带有圆形箭头的按钮)。

    保存修改

    Save your changes : invoke Save All, or click Hot Reload offline_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 myapp
$ cd myapp

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

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

运行程序

Run the app

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

    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
    

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

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 .

  4. 在命令行窗口输入 r

    保存修改

    Type r in the terminal window.

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

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.

下一步

Next step

接下来,你会通过一个小的应用学到一些 Flutter 的核心概念。

You’ll next learn some core Flutter concepts by creating a small app.