在 Linux 上开始构建 Flutter Web 应用

内容

验证系统要求
- 硬件要求
- 软件要求
配置文本编辑器或 IDE
安装 Flutter SDK
检查您的开发设置
- 运行 Flutter doctor
- 解决 Flutter doctor 问题
使用 Flutter 在 Linux 上开始开发 Web 应用
管理您的 Flutter SDK

验证系统要求

要安装并运行 Flutter，您的 Linux 环境必须满足以下硬件和软件要求。

硬件要求

您的 Linux Flutter 开发环境必须满足以下最低硬件要求。

要求	最低	推荐
CPU 内核	4	8
内存（GB）	8	16
显示分辨率（像素）	WXGA (1366 x 768)	FHD (1920 x 1080)
可用磁盘空间（GB）	11.0	60.0

软件要求

要编写和编译适用于 Web 的 Flutter 代码，您必须拥有以下版本的 Linux 和所列软件包。

操作系统

Flutter 支持 Debian Linux 11 或更高版本以及 Ubuntu Linux 20.04 LTS 或更高版本。

开发工具

在 Linux 上开发 Flutter

验证是否已安装以下工具：bash、file、mkdir、rm、which

$ which bash file mkdir rm which
/bin/bash
/usr/bin/file
/bin/mkdir
/bin/rm
which: shell built-in command

安装以下软件包：curl、git、unzip、xz-utils、zip、libglu1-mesa

$ sudo apt-get update -y && sudo apt-get upgrade -y;
$ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

安装 Google Chrome 以调试 Web 应用程序的 JavaScript 代码。

如何从命令行安装 Chrome

$ wget https://dl-ssl.google.com/linux/linux_signing_key.pub -O /tmp/google.pub
$ gpg --no-default-keyring \
        --keyring /etc/apt/keyrings/google-chrome.gpg \
        --import /tmp/google.pub
$ echo 'deb [arch=amd64 signed-by=/etc/apt/keyrings/google-chrome.gpg] http://dl.google.com/linux/chrome/deb/ stable main' | sudo tee /etc/apt/sources.list.d/google-chrome.list
$ sudo apt-get update -y; sudo apt-get install -y google-chrome-stable

当你运行当前版本的 flutter doctor 时，它可能会列出这些软件包的不同版本。如果出现这种情况，请安装它推荐的版本。

上述软件的开发人员为这些产品提供支持。要解决安装问题，请查阅该产品的文档。

配置文本编辑器或 IDE

你可以使用任何文本编辑器或集成开发环境 (IDE) 结合 Flutter 的命令行工具来构建 Flutter 应用程序。

使用带有 Flutter 扩展或插件的 IDE 可提供代码自动完成、语法高亮、小部件编辑辅助、调试和其他功能。

流行的选择包括

Visual Studio Code 1.77 或更高版本，并带有适用于 VS Code 的 Flutter 扩展。
Android Studio 2023.1 (Hedgehog) 或更高版本，并带有适用于 IntelliJ 的 Flutter 插件。
IntelliJ IDEA 2023.1 或更高版本，并带有适用于 IntelliJ 的 Flutter 插件。

安装 Flutter SDK

要安装 Flutter SDK，你可以使用 VS Code Flutter 扩展或自行下载并安装 Flutter 捆绑包。

使用 VS Code 安装
下载并安装

使用 VS Code 安装 Flutter

要使用这些说明安装 Flutter，请验证你已安装 Visual Studio Code 1.77 或更高版本以及 VS Code 的 Flutter 扩展。

提示 VS Code 安装 Flutter

启动 VS Code。
要打开命令面板，请按 Control + Shift + P。
在命令面板中，键入 flutter。
选择Flutter: 新建项目。
VS Code 会提示你找到计算机上的 Flutter SDK。
1. 如果你已安装 Flutter SDK，请单击找到 SDK。
2. 如果你尚未安装 Flutter SDK，请单击下载 SDK。
  
  如果你未按照开发工具先决条件中的说明安装 Git，此选项会将你发送到 Flutter 安装页面。
当出现哪个 Flutter 模板？提示时，请忽略它。按 Esc。在检查你的开发设置后，你可以创建一个测试项目。

下载 Flutter SDK

当为 Flutter SDK 选择文件夹对话框显示时，选择你要安装 Flutter 的位置。

VS Code 会将你置于用户个人资料中以开始。选择其他位置。

考虑 ~/development/
单击克隆 Flutter。

在下载 Flutter 时，VS Code 会显示此弹出通知
```
Downloading the Flutter SDK. This may take a few minutes.
```
此下载需要几分钟。如果你怀疑下载已挂起，请单击取消，然后重新开始安装。

下载 Flutter 完成后，会显示输出面板。

Checking Dart SDK version...
Downloading Dart SDK from the Flutter engine ...
Expanding downloaded archive...

如果成功，VS Code 会显示此弹出通知

Initializing the Flutter SDK. This may take a few minutes.

在初始化时，输出面板会显示以下内容

Building flutter tool...
Running pub upgrade...
Resolving dependencies...
Got dependencies.
Downloading Material fonts...
Downloading Gradle Wrapper...
Downloading package sky_engine...
Downloading flutter_patched_sdk tools...
Downloading flutter_patched_sdk_product tools...
Downloading windows-x64 tools...
Downloading windows-x64/font-subset tools...

此过程还会运行 flutter doctor -v。在该步骤中，请忽略此输出。Flutter Doctor 可能显示不适用于此快速入门的错误。

当 Flutter 安装成功时，VS Code 会显示此弹出通知

Do you want to add the Flutter SDK to PATH so it's accessible
in external terminals?

VS Code 可能会显示 Google Analytics 通知。

如果你同意，请单击确定。
要在所有 shell 窗口中启用 flutter
1. 关闭，然后重新打开所有 shell 窗口。
2. 重新启动 VS Code。

下载并安装 Flutter

要安装 Flutter，请从其存档中下载 Flutter SDK 捆绑包，将捆绑包移动到你希望存储它的位置，然后解压 SDK。

下载以下安装捆绑包以获取 Flutter SDK 的最新稳定版本。

(正在加载…)

对于其他发布渠道和旧版本，请查看 SDK 存档。

Flutter SDK 应下载到 Linux 默认下载目录：~/Downloads/。
创建一个可以安装 Flutter 的文件夹。

考虑在 /usr/bin/ 中创建一个目录。
将 zip 文件解压到要存储 Flutter SDK 的目录中。
```
$ ~/Downloads/flutter_sdk_v1.0.0.zip /usr/bin/
```
完成后，Flutter SDK 应位于 /usr/bin/flutter 目录中。

将 Flutter 添加到 `PATH` 中

要在 shell 中运行 Flutter 命令，请将 Flutter 添加到 PATH 环境变量中。

检查打开新的控制台窗口时启动哪个 shell。这将是你的默认 shell。
```
$ echo $SHELL
```
这与告诉你当前控制台中运行哪个 shell 的另一个命令不同。
```
$ echo $0
```

要将 Flutter 添加到 PATH 中，展开默认 shell 的条目，然后选择命令。

显示 bash 命令

$ echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.bash_profile 

显示 zsh 命令

$ echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.zshenv 

显示 fish 命令

$ fish_add_path -g -p $HOME/development/flutter/bin 

显示 csh 命令

$ echo 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.cshrc 

显示 tsch 命令

$ echo 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.tcshrc 

显示 ksh 命令

$ echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile 

显示 sh 命令

$ echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile 

要应用此更改，请重新启动所有打开的终端会话。

检查您的开发设置

help 帮助

运行 Flutter doctor

flutter doctor 命令验证 Linux 中完整 Flutter 开发环境的所有组件。

打开一个 shell。
要验证您对所有组件的安装，请运行以下命令。
```
$ flutter doctor
```

由于您选择为 Web 开发，因此您不需要所有组件。如果您遵循本指南，您的命令结果应类似于

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on Ubuntu 20.04 (LTS), locale en)
[!] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[!] Linux toolchain - develop for Linux desktop
[✓] VS Code (version 1.86)
[✓] Connected device (1 available)
[✓] Network resources


! Doctor found issues in 3 categories.

解决 Flutter doctor 问题

当 flutter doctor 命令返回错误时，可能是针对 Flutter、VS Code、某个 Linux 库、已连接设备或网络资源。

如果 flutter doctor 命令针对其中任何组件返回错误，请使用详细标志再次运行该命令。

$ flutter doctor -v

检查输出，了解您可能需要安装的其他软件或需要执行的进一步任务。

如果您更改了 Flutter SDK 或其相关组件的配置，请再次运行 flutter doctor 以验证安装。

使用 Flutter 开始开发 Linux 应用程序

恭喜！现在您已经安装了所有先决条件和 Flutter SDK，您应该可以开始为 Linux 上的 Web 开发 Flutter 应用程序了。

管理您的 Flutter SDK

要了解有关管理 Flutter SDK 安装的更多信息，请参阅以下资源。