开发体验初探

本页面讲解如何通过模板实现一个 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. Open the IDE and select Create New Flutter Project.
  2. Select Flutter Application as the project type. Then click Next.
  3. Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank).
  4. Enter a project name (for example, myapp). Then click Next.
  5. Click Finish.
  6. Wait for Android Studio to install the SDK and create the project.

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

Run the app

  1. Locate the main Android Studio toolbar:
    Main IntelliJ toolbar
  2. 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. 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 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. Invoke View > Command Palette.
  2. Type “flutter”, and select the Flutter: New Project.
  3. Select Application.
  4. Create or select the parent directory for the new project folder.
  5. Enter a project name, such as myapp, and press Enter.
  6. Wait for project creation to complete and the main.dart file to appear.

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

Run the app

  1. Locate the VS Code status bar (the blue bar at the bottom of the window):
    status bar
  2. Select a device from the Device Selector area. For details, see Quickly switching between Flutter 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. Invoke Run > Start Debugging or press F5.
  4. 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. 保存修改

    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 myapp
$ cd myapp

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 myapp --org dev.flutter --android-language java --ios-language objc 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 设备是否已经正常运行。如果程序未显示,请在 安装 页面里,根据你的操作系统按照设备相关说明进行操作。

    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.