试驾
你将学到什么
#- 如何从示例模板创建新的 Flutter 应用。
- 如何运行新的 Flutter 应用。
- 如何在对应用进行更改后使用“热重载”。
这些任务取决于您使用的集成开发环境 (IDE)。
选项 1 说明如何使用 Visual Studio Code 及其 Flutter 扩展进行编码。
选项 2 说明如何使用 Android Studio 或 IntelliJ IDEA 及其 Flutter 插件进行编码。
Flutter 支持 IntelliJ IDEA 社区版、教育版和旗舰版。
选项 3 说明如何使用您选择的编辑器,并使用终端编译和调试代码。
选择你的 IDE
#选择你喜欢的 Flutter 应用 IDE。
创建示例 Flutter 应用
#要从 VS Code 使用 Flutter DevTools,请安装Flutter 扩展。这也会自动安装Dart 扩展。使用这些扩展,您可以调试您的 Flutter 应用。
打开命令面板。
转到查看>命令面板或按 + Shift + P。
输入
flutter
。选择Flutter: 新建项目。
当提示哪个 Flutter 项目时,选择应用程序。
创建或选择新项目文件夹的父目录。
当提示项目名称时,输入
test_drive
。按Enter。
等待项目创建完成。
打开
lib
目录,然后打开main.dart
。要了解每个代码块的作用,请查看该 Dart 文件中的注释。
前面的命令创建了一个名为test_drive
的 Flutter 项目目录,其中包含一个简单的演示应用,该应用使用了Material Components。
运行你的示例 Flutter 应用
#在您的桌面平台、Chrome 网络浏览器、iOS 模拟器或 Android 模拟器上运行您的示例应用程序。
打开命令面板。
转到查看>命令面板或按 + Shift + P。
输入
flutter
。选择Flutter: 选择设备。
如果没有设备正在运行,此命令会提示您启用设备。
从选择设备提示中选择目标设备。
选择目标后,启动应用。转到运行>启动调试或按F5。
等待应用启动。
您可以在调试控制台视图中查看启动进度。
应用构建完成后,您的设备会显示您的应用。
尝试热重载
#Flutter 通过有状态的热重载提供快速开发周期,即能够重新加载正在运行的应用的代码,而无需重新启动或丢失应用状态。
您可以更改应用源代码,在 VS Code 中运行热重载命令,并在目标设备上查看更改。
打开
lib/main.dart
。将以下字符串中的
pushed
更改为clicked
。截至撰写本文时,它位于main.dart
文件的第 109 行。原始 新的 'You have pushed the button this many times:' ,
'You have clicked the button this many times:' ,
保存更改:调用全部保存,或单击热重载 。
您的应用会更新字符串,您可以看到它。
创建示例 Flutter 应用
#启动 IDE。
为了能够在 Android Studio 上创建 Flutter 项目,请安装Flutter 插件,并为了获得智能 Dart 代码辅助(包括代码补全、格式化、导航、意图、重构等),请安装Dart 插件。
返回 IDE 开始页面,然后单击欢迎使用 Android Studio对话框顶部的新建 Flutter 项目。
在生成器下,单击Flutter。
根据开发机器上的 Flutter SDK 位置验证Flutter SDK 路径值。
单击下一步。
在项目名称字段中输入
test_drive
。您的项目名称应使用蛇形命名法并小写。这遵循 Flutter 项目命名的最佳实践。将项目位置字段中的目录设置为 Microsoft Windows 上的
C:\dev\test_drive
或其他平台上的~/development/test_drive
。如果您之前没有创建该目录,Android Studio 会显示目录不存在的警告。单击创建。
从项目类型下拉列表中,选择应用程序。
忽略其余表单字段。对于此试驾,您无需更改它们。单击创建。
等待 Android Studio 创建项目。
打开
lib
目录,然后打开main.dart
。要了解每个代码块的作用,请查看该 Dart 文件中的注释。
前面的命令创建了一个名为test_drive
的 Flutter 项目目录,其中包含一个简单的演示应用,该应用使用了Material Components。
运行你的示例 Flutter 应用
#找到 Android Studio 编辑窗口顶部的主要 Android Studio 工具栏。
在目标选择器中,选择用于运行应用的 Android 设备。您在安装部分创建了 Android 目标设备。
要运行您的应用,请执行以下操作之一
单击工具栏中的运行图标。
转到运行>运行。
按Ctrl + R。
应用构建完成后,您的设备会显示您的应用。
尝试热重载
#Flutter 通过有状态的热重载提供快速开发周期,即能够重新加载正在运行的应用的代码,而无需重新启动或丢失应用状态。
您可以更改应用源代码,在 Android Studio 中运行热重载命令,并在目标设备上查看更改。
打开
lib/main.dart
。将以下字符串中的
pushed
更改为clicked
。截至撰写本文时,它位于main.dart
文件的第 109 行。原始 新的 'You have pushed the button this many times:' ,
'You have clicked the button this many times:' ,
保存更改:调用全部保存,或单击热重载 。
您的应用会更新字符串,您可以看到它。
创建示例 Flutter 应用
#要创建一个新的 Flutter 应用,请在您的 shell 或终端中运行以下命令。
运行
flutter create
命令。flutter create test_drive
该命令创建了一个名为
test_drive
的 Flutter 项目目录,其中包含一个简单的演示应用,该应用使用了Material Components。切换到 Flutter 项目目录。
cd test_drive
运行你的示例 Flutter 应用
#要验证您是否有正在运行的目标设备,请运行以下命令。
flutter devices
您在安装部分创建了目标设备。
要运行您的应用,请运行以下命令。
flutter run
应用构建完成后,您的设备会显示您的应用。
尝试热重载
#Flutter 通过有状态的热重载提供快速开发周期,即能够重新加载正在运行的应用的代码,而无需重新启动或丢失应用状态。
您可以更改应用源代码,在 VS Code 中运行热重载命令,并在目标设备上查看更改。
打开
lib/main.dart
。将以下字符串中的
pushed
更改为clicked
。截至撰写本文时,它位于main.dart
文件的第 109 行。原始 新的 'You have pushed the button this many times:' ,
'You have clicked the button this many times:' ,
保存更改。
在终端窗口中输入r。
您的应用会更新字符串,您可以看到它。
除非另有说明,否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新时间:2024-12-04。 查看源代码 或 报告问题。