Skip to main content

测试驱动

你将学到什么

#
  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 组件 的简单演示应用。

运行您的示例 Flutter 应用

#

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

  1. 打开命令面板。

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

  2. 输入 flutter

  3. 选择 Flutter: 选择设备

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

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

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

  6. 等待应用启动。

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

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

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. 保存您的更改 : 调用 全部保存,或单击 热重载 热重载闪电图标 .

您可以实时看到应用更新了字符串。

热重载后的入门应用
热重载后的入门应用

创建一个示例 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 组件 的简单演示应用。

运行您的示例 Flutter 应用

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

    主 IntelliJ 工具栏

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

  3. 要运行您的应用,请做出以下选择之一:

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

    2. 转到 运行 > 运行

    3. Ctrl + R

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

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. 保存您的更改 : 调用 全部保存,或单击 热重载 热重载闪电图标 .

您可以实时看到应用更新了字符串。

热重载后的入门应用
热重载后的入门应用

创建一个示例 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

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

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

您可以实时看到应用更新了字符串。

热重载后的入门应用
热重载后的入门应用