跳至主要内容

试驾

你将学到什么

#
  1. 如何从示例模板创建新的 Flutter 应用。
  2. 如何运行新的 Flutter 应用。
  3. 如何在对应用进行更改后使用“热重载”。

这些任务取决于您使用的集成开发环境 (IDE)。

  • 选项 1 说明如何使用 Visual Studio Code 及其 Flutter 扩展进行编码。

  • 选项 2 说明如何使用 Android Studio 或 IntelliJ IDEA 及其 Flutter 插件进行编码。

    Flutter 支持 IntelliJ IDEA 社区版、教育版和旗舰版。

  • 选项 3 说明如何使用您选择的编辑器,并使用终端编译和调试代码。

选择你的 IDE

#

选择你喜欢的 Flutter 应用 IDE。

创建示例 Flutter 应用

#
  1. 要从 VS Code 使用 Flutter DevTools,请安装Flutter 扩展。这也会自动安装Dart 扩展。使用这些扩展,您可以调试您的 Flutter 应用。

  2. 打开命令面板。

    转到查看>命令面板或按 + Shift + P

  3. 输入flutter

  4. 选择Flutter: 新建项目

  5. 当提示哪个 Flutter 项目时,选择应用程序

  6. 创建或选择新项目文件夹的父目录。

  7. 当提示项目名称时,输入test_drive

  8. Enter

  9. 等待项目创建完成。

  10. 打开lib目录,然后打开main.dart

    要了解每个代码块的作用,请查看该 Dart 文件中的注释。

前面的命令创建了一个名为test_drive的 Flutter 项目目录,其中包含一个简单的演示应用,该应用使用了Material Components

运行你的示例 Flutter 应用

#

在您的桌面平台、Chrome 网络浏览器、iOS 模拟器或 Android 模拟器上运行您的示例应用程序。

  1. 打开命令面板。

    转到查看>命令面板或按 + Shift + P

  2. 输入flutter

  3. 选择Flutter: 选择设备

    如果没有设备正在运行,此命令会提示您启用设备。

  4. 选择设备提示中选择目标设备。

  5. 选择目标后,启动应用。转到运行>启动调试或按F5

  6. 等待应用启动。

    您可以在调试控制台视图中查看启动进度。

应用构建完成后,您的设备会显示您的应用。

Starter app on macOS
macOS 上的启动应用

尝试热重载

#

Flutter 通过有状态的热重载提供快速开发周期,即能够重新加载正在运行的应用的代码,而无需重新启动或丢失应用状态。

您可以更改应用源代码,在 VS Code 中运行热重载命令,并在目标设备上查看更改。

  1. 打开lib/main.dart

  2. 将以下字符串中的pushed更改为clicked。截至撰写本文时,它位于main.dart文件的第 109 行。

    原始新的
    'You have pushed the button this many times:' ,'You have clicked the button this many times:' ,
  3. 保存更改:调用全部保存,或单击热重载 热重载的闪电符号图标

您的应用会更新字符串,您可以看到它。

Starter app after hot reload
热重载后的启动应用

创建示例 Flutter 应用

#
  1. 启动 IDE。

  2. 为了能够在 Android Studio 上创建 Flutter 项目,请安装Flutter 插件,并为了获得智能 Dart 代码辅助(包括代码补全、格式化、导航、意图、重构等),请安装Dart 插件

  3. 返回 IDE 开始页面,然后单击欢迎使用 Android Studio对话框顶部的新建 Flutter 项目

  4. 生成器下,单击Flutter

  5. 根据开发机器上的 Flutter SDK 位置验证Flutter SDK 路径值。

  6. 单击下一步

  7. 项目名称字段中输入test_drive。您的项目名称应使用蛇形命名法并小写。这遵循 Flutter 项目命名的最佳实践。

  8. 项目位置字段中的目录设置为 Microsoft Windows 上的C:\dev\test_drive或其他平台上的~/development/test_drive

    如果您之前没有创建该目录,Android Studio 会显示目录不存在的警告。单击创建

  9. 项目类型下拉列表中,选择应用程序

  10. 忽略其余表单字段。对于此试驾,您无需更改它们。单击创建

  11. 等待 Android Studio 创建项目。

  12. 打开lib目录,然后打开main.dart

    要了解每个代码块的作用,请查看该 Dart 文件中的注释。

前面的命令创建了一个名为test_drive的 Flutter 项目目录,其中包含一个简单的演示应用,该应用使用了Material Components

运行你的示例 Flutter 应用

#
  1. 找到 Android Studio 编辑窗口顶部的主要 Android Studio 工具栏。

    Main IntelliJ toolbar

  2. 目标选择器中,选择用于运行应用的 Android 设备。您在安装部分创建了 Android 目标设备。

  3. 要运行您的应用,请执行以下操作之一

    1. 单击工具栏中的运行图标。

    2. 转到运行>运行

    3. Ctrl + R

应用构建完成后,您的设备会显示您的应用。

Starter app on macOS
macOS 上的启动应用

尝试热重载

#

Flutter 通过有状态的热重载提供快速开发周期,即能够重新加载正在运行的应用的代码,而无需重新启动或丢失应用状态。

您可以更改应用源代码,在 Android Studio 中运行热重载命令,并在目标设备上查看更改。

  1. 打开lib/main.dart

  2. 将以下字符串中的pushed更改为clicked。截至撰写本文时,它位于main.dart文件的第 109 行。

    原始新的
    'You have pushed the button this many times:' ,'You have clicked the button this many times:' ,
  3. 保存更改:调用全部保存,或单击热重载 热重载的闪电符号图标

您的应用会更新字符串,您可以看到它。

Starter app after hot reload
热重载后的启动应用

创建示例 Flutter 应用

#

要创建一个新的 Flutter 应用,请在您的 shell 或终端中运行以下命令。

  1. 运行flutter create命令。

    flutter create test_drive

    该命令创建了一个名为test_drive的 Flutter 项目目录,其中包含一个简单的演示应用,该应用使用了Material Components

  2. 切换到 Flutter 项目目录。

    cd test_drive

运行你的示例 Flutter 应用

#
  1. 要验证您是否有正在运行的目标设备,请运行以下命令。

    flutter devices

    您在安装部分创建了目标设备。

  2. 要运行您的应用,请运行以下命令。

    flutter run

应用构建完成后,您的设备会显示您的应用。

Starter app on macOS
macOS 上的启动应用

尝试热重载

#

Flutter 通过有状态的热重载提供快速开发周期,即能够重新加载正在运行的应用的代码,而无需重新启动或丢失应用状态。

您可以更改应用源代码,在 VS Code 中运行热重载命令,并在目标设备上查看更改。

  1. 打开lib/main.dart

  2. 将以下字符串中的pushed更改为clicked。截至撰写本文时,它位于main.dart文件的第 109 行。

    原始新的
    'You have pushed the button this many times:' ,'You have clicked the button this many times:' ,
  3. 保存更改。

  4. 在终端窗口中输入r

您的应用会更新字符串,您可以看到它。

Starter app after hot reload
热重载后的启动应用