Flutter 入门：创建和运行你的第一个应用的实用指南

介绍

大家好……在今天的文章中，我将带你完整地了解创建你的第一个 Flutter 应用，并首次在物理和虚拟模拟器以及浏览器中运行它（没错，你可以使用同一套 Flutter 代码库开发 Android、iOS、Web 和桌面应用，我在本 Flutter 系列的第一篇文章中已经详细介绍过）。此外，本文还会分享一些非常有用的 Flutter 命令以及一些实用的 Flutter 使用技巧。

上一篇文章

在继续之前，请回顾我之前的文章，其中我详细介绍了如何设置本地机器以进行 Flutter 开发。

创建你的第一个 Flutter 应用

那么，事不宜迟，让我们马上开始吧！！！

首先，我们需要在命令行（终端）中创建一个简单的 Flutter 应用。打开终端窗口，输入flutter upgrade类似下面的命令。
这条命令会升级 Flutter 的版本，并下载和升级一些必要的软件包，以确保 Flutter 在本地机器上流畅运行。
请允许该命令执行完毕，它会自动在同一个终端窗口中运行 `npm install`flutter version和 `npm flutter doctorinstall` 命令。

你应该有一个存放 Flutter 应用的目录。我的目录是“ C:\Users\Dexter\flutter-apps ”。你需要运行命令切换到你创建的 Flutter 应用存储目录cd flutter-apps，就像下面的截图中显示的那样。
接下来，输入以下命令flutter create sample_app并按回车键。这将创建项目文件夹并下载我们名为“ sample_app ”的应用运行所需的基本依赖项。
完成后，你应该会看到以下结果，其中包含有关如何运行应用以及应用入口点位置的有用信息。 使用 Windows 资源管理器（如果你使用的是 Mac，则使用 Finder），你应该能够导航到应用所在的目录。返回终端窗口，运行命令，它将切换到我们的应用目录。现在我们已经进入了应用目录，运行命令。 运行该命令将打开一个新的 VS Code 应用窗口。


cd sample_app
code .

code .

让我解释一下上图中几个文件夹和文件的作用：

1. “ android ”和“ ios ”文件夹包含构建APK/IPA文件并将Android和/或iOS应用程序分别部署到Google Play商店或iOS App Store时所需的必要文件和依赖项。

2. “ lib ”文件夹是我们应用程序的入口点，因为我们的“ main.dart ”文件就存储在这里。

3. “ linux ”、“ macos ”、“ web ”和“ windows ”文件夹包含使用 Flutter 构建和开发适用于 Linux、MacOS、Windows 平台以及 Web 浏览器的应用程序时所需的依赖项。

4. “ pubspec.yaml ”文件极其重要，因为当我们从Dart 包仓库下载 Flutter 包后，想要在应用中使用这些包时，就需要编辑这个文件。

5. “ README.md ”是一个Markdown文件，其中包含有关您的应用程序的所有信息和文档。

注意-请勿删除或更改“pubspec.yaml”文件的位置，否则会产生您无法预料的问题和错误。

设置您的物理设备/模拟器

现在，是时候进入本文的精彩部分了——我们将在物理设备/模拟器上运行我们的应用程序——接下来我将介绍如何将物理设备设置为我们的模拟器。

本部分我使用的是小米 Redmi 9T，目前运行的是 Android 11 系统。当然，您的体验可能与我的略有不同，因为您可能使用的是三星、诺基亚或其他 Android 设备，但操作步骤通常类似，那么我们开始吧。另外，您的 USB 数据线在这里会非常有用。

现在，你的开发机器和安卓设备应该已经摆放在一起了🙃

1. 在移动设备上找到“设置”，您应该会看到类似下图的界面。搜索“关于手机”或类似选项并点击。

2. 从上方操作后，您应该会看到如下屏幕，其中显示了您安卓设备的一些信息。根据您使用的设备，您应该会看到“版本号”，我的设备显示的是“ MIUI 版本”，但它们指的是同一件事。快速点击“版本号”（大约 5 到 7 次），直到出现“您现在是开发者”的提示。这样做会激活您移动设备上的“开发者选项”。

3. 返回“设置”主屏幕，找到“开发者选项”。我的选项在“其他设置”下，需要向下滚动才能找到。找到后，点击即可。
   

4. 从上面的步骤 3开始，向下滚动直到看到“开发者选项”并选中它。如果看不到此选项，则需要从步骤 1重新开始整个过程​​。
   

5. 进入后，向下滚动直到找到“ USB调试”和“通过USB安装应用”这两个选项。
   点击“ USB调试”选项，您可能会（也可能不会）看到一个对话框弹出，要求您进一步确认，如下图所示。请务必勾选必要的复选框，然后点击“确定”。
   

6. 现在，将 USB 数据线的一端连接到手机，另一端连接到开发电脑，并保持连接状态。连接完成后，返回“开发者选项”。现在，您可以选择“通过 USB 安装应用”选项，此时您应该会看到类似下图的界面，“ USB 调试”和“通过 USB 安装应用”选项均已启用。稍后，您的手机上会弹出一个窗口，询问您是否信任连接的电脑，只需点击“确定”即可（我的手机已经弹出窗口了，但我完全忘记截图了）。这就是 ADB（Android 调试桥）在后台运行，它可以帮助您更流畅地完成工作流程。
   
   

在物理设备/模拟器上运行应用程序

手机保持连接状态，返回开发电脑上的 VS Code，因为现在是时候运行我们的应用了。打开 VS Code 后，你应该会看到类似下图的界面。
我的 VS Code 会自动识别我的设备，但你的可能并非如此。如果你的 VS Code 没有自动识别你的物理模拟器，请按照以下步骤操作。

1. 在 VS Code 中，同时按住Ctrl + Shift + P键，VS Code 窗口顶部应该会弹出一个对话框。

2. 在文本框中输入“ devices ”，然后选择列表顶部的“ Flutter: 选择设备”选项。

3. 您的实体设备/模拟器应该位于设备列表顶部，旁边会显示“移动设备
   ”标签。选中它。瞧！您已选择要运行 Flutter 应用的设备。

4. 接下来，打开 VS Code 内置的终端，你可以同时按住Ctrl + Shift + `flutter devices键来打开它。打开终端后，输入命令并运行。你应该会在结果中看到你的物理模拟器。

5. 接下来，输入命令flutter run在您的物理设备上安装并运行该应用。根据您的系统配置，这可能需要几分钟时间，因为这是首次运行，请耐心等待。这一步非常棘手，因为您必须同时关注 VS Code 和 Android 设备。此时最好不要离开电脑。我的安装过程比预期要长，因为我的 VS Code 需要确认一些 Android 依赖项，例如 Android Studio 中安装的 SDK 工具、SDK 平台和许可证。
   

几分钟后（我的用了将近一个小时），“运行 Gradle 任务：'assembleDebug' ”过程应该会完成，然后你会看到绿色提示，表明你的应用程序已经构建完成。

几秒钟后，应用程序安装过程将开始。您的设备上会弹出一个窗口，询问您是否允许通过 USB 安装我们的应用程序“ sample_app ”。该窗口的内容可能类似于“允许将来再次连接”、“不再询问此设备”或类似提示。请勾选相应的复选框，然后点击“确定”。应用程序将安装到您的设备上，并自动运行。

等待整个过程完成，直到您的终端与下图类似，此时您的应用程序已安装在您的物理设备/模拟器上。

太棒了！您已成功将个人移动设备设置为 Flutter 构建时的物理设备/模拟器。您应该会看到类似下图的屏幕。

让我们把应用的界面主题颜色从“蓝色”改成“橙色”（或者你喜欢的其他颜色）。我们需要编辑“ lib ”目录下的“ main.dart ”文件。修改完成后，打开终端并按下“ r ”键，执行所谓的“热重载”，使应用的颜色更改生效。这就是更改主题颜色后，应用在真机上的显示效果。

要结束该进程，请打开终端并按“ q ”键退出，您应该会看到类似下图所示的内容。此操作也会关闭您物理设备上的应用程序。

模拟器：物理设备与虚拟设备（Android 虚拟设备 - AVD）

这段话纯属个人观点，因为我更倾向于使用物理设备而非虚拟设备。这是因为我目前的开发机器配置有限，如果直接运行 AVD，我的电脑会不堪重负（当然只是比喻）。不过，如果你的机器配置更高，使用 AVD 会更快，也能节省开发时间。我会在后续的文章中指导你如何设置虚拟设备 (AVD)，但在此之前……

是的，我既用过实体设备也用过AVD设备，我可以很肯定地告诉你，AVD设备的操作速度比实体设备快十倍。

额外惊喜

您可以在终端中运行一个简单的命令来查看 Flutter 命令列表flutter -h。

结论

你已经读到这里了，我必须为你的耐心点赞。这篇文章涵盖了很多内容，如果你有任何问题，我都乐意解答。下一篇文章我们会详细讲解 Flutter 的架构，所以记得关注我，以免错过我的下一篇文章。

PS

我正在一个美好的周日晚上编辑这篇文章……所以，感谢上帝，又到周一了💪🏽🚀⚡🔥