使用 Flutter 创建移动应用

Flutter 是全球移动开发者中流行的项目。该框架拥有庞大而友好的爱好者社区，并且随着 Flutter 帮助程序员将其项目带入移动领域而不断壮大。

本教程旨在帮助您开始使用 Flutter 进行移动开发。阅读完本教程后，您将了解如何快速安装和设置框架，以便开始为智能手机、平板电脑和其他平台编写代码。

本操作指南假定您的计算机上已安装 Android Studio，并且具有一定的使用经验。

什么是 Flutter？

Flutter 使开发者能够为多个平台构建应用，包括

• Android
• iOS
• Web（测试版）
• macOS（开发中）
• Linux（开发中）

对 macOS 和 Linux 的支持尚处于早期开发阶段，而对 Web 的支持预计很快发布。这意味着您现在可以尝试其功能（如下所述）。

安装 Flutter

我使用的是 Ubuntu 18.04，但安装过程与其他 Linux 发行版（如 Arch 或 Mint）类似。

使用 snapd 安装

要在 Ubuntu 或类似发行版上使用 snapd 安装 Flutter，请在终端中输入以下命令

$ sudo snap install flutter --classic

$ sudo snap install flutter –classic
flutter 0+git.142868f from flutter Team/ installed

然后使用 flutter 命令启动它。首次启动时，框架将下载到您的计算机

$ flutter
Initializing Flutter
Downloading https://storage.googleapis.com/flutter_infra[...]

下载完成后，您将看到一条消息，告知您 Flutter 已初始化

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

手动安装

如果您没有 snapd 或您的发行版不是 Ubuntu，则安装过程会略有不同。在这种情况下，下载 推荐用于您操作系统的 Flutter 版本。

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

然后将其解压到您的 home 目录。

在您喜欢的文本编辑器中打开您 home 目录中的 .bashrc 文件（如果您使用 Z shell，则打开 .zshrc 文件）。由于它是隐藏文件，您必须首先在文件管理器中启用显示隐藏文件，或者从终端中使用以下命令打开它

$ gedit ~/.bashrc &

将以下行添加到文件末尾

export PATH="$PATH:~/flutter/bin"

保存并关闭文件。请记住，如果您将 Flutter 解压到 home 目录以外的其他位置，则 Flutter SDK 的路径 将有所不同。

关闭终端，然后重新打开它，以便加载新的配置。或者，您可以使用以下命令加载配置

$ . ~/.bashrc

如果您没有看到错误，则一切正常。

这种安装方法比使用 snap 命令稍微困难一些，但它非常通用，可让您在几乎任何发行版上安装框架。

检查安装

要检查结果，请在终端中输入以下命令

flutter doctor -v

您将看到有关已安装组件的信息。如果您看到错误，请不要担心。您尚未安装任何用于 Flutter SDK 的 IDE 插件。

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

安装 IDE 插件

您应该在您的 集成开发环境 (IDE) 中安装插件，以帮助 IDE 与 Flutter SDK 交互、与设备交互以及构建代码。

常用于 Flutter 开发的三种主要 IDE 工具是 IntelliJ IDEA（社区版）、Android Studio 和 VS Code（或 VSCodium）。在本教程中，我使用的是 Android Studio，但这些步骤与在 IntelliJ IDEA（社区版）上的操作类似，因为它们构建在同一平台上。

首先，启动 Android Studio。打开 Settings 并转到 Plugins 窗格，然后选择 Marketplace 选项卡。在搜索行中输入 Flutter，然后单击 Install。

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

您可能会看到安装 Dart 插件的选项；同意安装。如果您没有看到 Dart 选项，请通过重复上述步骤手动安装它。我还建议使用 Rainbow Brackets 插件，这可以使代码导航更容易。

就这样！您已安装了所需的所有插件。您可以通过在终端中输入熟悉的命令来检查

flutter doctor -v

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

构建您的“Hello World”应用程序

要启动一个新项目，请创建一个 Flutter 项目

1. 选择 New -> New Flutter project。
   
   
   

   图片来源：

   ^{（Vitaly Kuprenko，CC BY-SA 4.0）}

2. 在窗口中，选择您想要的项目类型。在这种情况下，您需要 Flutter Application。
3. 将您的项目命名为 hello_world。请注意，您应该使用合并的名称，因此请使用下划线而不是空格。您可能还需要指定 SDK 的路径。
   
   
   

   图片来源：

   ^{（Vitaly Kuprenko，CC BY-SA 4.0）}

4. 输入包名。

您已创建了一个项目！现在，您可以在设备上或使用模拟器启动它。

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

选择您想要的设备，然后按 Run。稍等片刻，您将看到结果。

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

现在您可以开始处理一个 中级项目 了。

尝试 Flutter for web

在为 Web 安装 Flutter 组件之前，您应该知道 Flutter 对 Web 应用的支持目前还很初步。因此，现在将其用于复杂的项目不是一个好主意。

默认情况下，Flutter for web 在基本 SDK 中未激活。要将其打开，请转到 beta 频道。为此，请在终端中输入以下命令

flutter channel beta

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

接下来，使用以下命令根据 beta 分支升级 Flutter

flutter upgrade

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

要使 Flutter for web 工作，请输入

flutter config --enable-web

重启您的 IDE；这有助于 Android Studio 索引新的 IDE 并重新加载设备列表。您应该看到几个新设备

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

选择 Chrome 会在浏览器中启动应用，而 Web Server 会为您提供 Web 应用的链接，您可以在任何浏览器中打开该链接。

尽管如此，现在还不是急于进行开发的时候，因为您当前的项目不支持 Web。要改进它，请在项目的根目录中打开终端并输入

flutter create

此命令会重新创建项目，并添加 Web 支持。现有代码不会被删除。

请注意，树结构已更改，现在有一个“web”目录

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

现在您可以开始工作了。选择 Chrome，然后按 Run。稍等片刻，您将在浏览器窗口中看到您的应用。

图片来源：

^{（Vitaly Kuprenko，CC BY-SA 4.0）}

恭喜！您刚刚为浏览器启动了一个项目，并且可以像处理任何其他网站一样继续使用它。

所有这些都来自相同的代码库，因为 Flutter 使为移动平台和 Web 编写代码成为可能，而几乎无需进行任何更改。

使用 Flutter 做更多事情

Flutter 是一个强大的移动开发工具，而且，它是迈向跨平台开发的重要进化步骤。学习它，使用它，并将您的应用交付到所有平台！