试用

你将学到

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

指南取决于你的 IDE

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

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

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

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

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

选择你的 IDE

选择你首选的 Flutter 应用 IDE。

创建你的示例 Flutter 应用

  1. 打开命令面板。

    转到视图 > 命令面板,或按 + Shift + P

  2. 键入 flutter

  3. 选择Flutter:新建项目

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

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

  6. 在提示项目名称时,输入 test_drive

  7. Enter

  8. 等待项目创建完成。

  9. 打开 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
入门应用

尝试热重载

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 on macOS
热重载后的入门应用

创建你的示例 Flutter 应用

  1. 启动 IDE。

  2. 欢迎使用 Android Studio对话框的顶部单击新建 Flutter 项目

  3. 生成器下,单击Flutter

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

  5. 单击下一步

  6. 项目名称字段中输入 test_drive。这遵循了命名 Flutter 项目的最佳实践。

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

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

  8. 项目类型下拉菜单中,选择应用

  9. 组织更改为 com.example.flutter.testdrive

    Android Studio 会要求提供公司域名。当您发布应用时,Android 会将公司域名和项目名称一起用作其包名称。iOS 使用其包 ID。

    使用 com.example.flutter.testdrive 以避免未来冲突。

  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
入门应用

尝试热重载

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 on macOS
热重载后的入门应用

创建你的示例 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
入门应用

尝试热重载

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 on macOS
热重载后的入门应用