从 Linux 开始向 Flutter 添加 Web DevTools

要将 Web 添加为 Linux 桌面的 Flutter 应用目标,请遵循此步骤。

将 Chrome 配置为 Web DevTools 工具

  1. 为 Google Chrome 分配至少 1 GB 的存储空间。考虑分配 2 GB 的存储空间以获得最佳配置。

  2. 下载并安装 Google Chrome 的 Linux 版本,以调试 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

检查你的开发设置

help 帮助

运行 Flutter doctor

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

  1. 打开一个 shell。

  2. 要验证你对所有组件的安装,请运行以下命令。

    $ 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 2 categories.

解决 Flutter doctor 问题

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

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

$ flutter doctor -v

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

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

使用 Flutter 开始在 Linux 上开发 Web 应用

恭喜!现在您已安装所有先决条件和 Flutter SDK,您应该能够开始为 Linux 上的 Web 开发 Flutter 应用。