Skip to main content

Software requirements

#

To write and compile Flutter code for Web, you must have the following version of Linux and the listed software packages.

Operating system

#

Flutter supports Debian Linux 11 or later and Ubuntu Linux 20.04 LTS or later .

Development tools

#

To develop Flutter on Linux:

  1. Install the following packages: 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

  2. Install Google Chrome to debug JavaScript code for web apps.

How to install Chrome from the command line 
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 的时候，它可能会列出这些软件包的其他不同版本。如果出现这种情况，请安装它推荐的版本。

The developers of the preceding software provide support for those products. To troubleshoot installation issues, consult that product's documentation.

Configure a text editor or IDE

#

You can build apps with Flutter using any text editor or integrated development environment (IDE) combined with Flutter's command-line tools.

Using an IDE with a Flutter extension or plugin provides code completion, syntax highlighting, widget editing assists, debugging, and other features.

Popular options include:

安装 Flutter SDK

#

你可以使用 VS Code Flutter 扩展或自行下载安装 Flutter 压缩包，来安装 Flutter SDK。

使用 VS Code 安装 Flutter

#

在使用以下流程来安装 Flutter 前，请确保你已经安装 Visual Studio Code 1.86 或更高版本，以及 Flutter extension for VS Code。

根据 VS Code 的提示，安装 Flutter

#

  1. 启动 VS Code。

  2. 打开 命令面板 (Command Palette)，按下快捷键 Control + Shift + P。

  3. 在 命令面板 (Command Palette) 中输入 flutter。

  4. 选择 Flutter: New Project。

  5. VS Code 会提示你在计算机上找到 Flutter SDK。

    1. 如果你已经安装 Flutter SDK，请单击 Locate SDK。

    2. 如果你没有安装 Flutter SDK, 请单击 Download SDK。

      如果你没有按照 开发工具的必要条件 安装 Git ，单击该按钮后会导航至 Flutter 安装页面。

  6. 当提示 Which Flutter template? 的时候，请忽略它。可以按下 Esc。你可以在检查完开发配置后创建初始测试项目。

下载 Flutter SDK

#

  1. 当对话框 Select Folder for Flutter SDK 显示时，选择你想要安装 Flutter 的位置。

    VS Code 会打开你默认的位置。你可以选择其他位置。

    请考虑 ~/development/ 这样的位置

  2. 单击 Clone Flutter。

    在下载 Flutter 时，VS Code 会弹出该通知：

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

    下载需要一些时间。如果你怀疑下载被挂起，请单击 Cancel 取消下载后，再重新尝试安装。

  3. Flutter 一旦完成下载， 输出 (Output) 面板就会显示。

    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.

    初始化时，输出 (Output) 面板会显示下面的内容：

    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?

  4. VS Code 可能会显示一则 Google Analytics 的通知。

    如果你同意，请单击 OK。

  5. 在所有 a shell 窗口中启用 flutter：

    1. 关闭，然后重新打开所有 a shell 窗口。

    2. 重新启动 VS Code。

下载并安装 Flutter

#

从归档列表中下载 Flutter SDK 压缩包，将压缩包移动到你想要的位置，然后解压 SDK，以此来安装 Flutter。

  1. 下载以下 Flutter SDK 最新 stable 版本的压缩包。

    (loading...)

    关于其他发布渠道和旧版本，请查阅 Flutter SDK 归档列表。

    Flutter SDK 应该会下载至 Linux 默认下载目录： ~/Downloads/。

  2. 创建一个文件夹，用于安装 Flutter。

    可以考虑在 ~/development/ 中创建一个目录。

  3. 将 Flutter SDK 压缩文件 (zip) 解压到你想要存储的目录中。可以使用以下指令进行解压。

    tar -xf ~/Downloads/flutter_sdk_v1.0.0.zip -C ~/development/

    完成后，Flutter SDK 应该会位于 ~/development/flutter 目录中。

Add Flutter to your PATH

#

To run Flutter commands in shell, add Flutter to the PATH environment variable.

  1. Check which shell starts when you open a new console window. This would be your default shell.

    echo $SHELL

    This differs from another command that tells you which shell runs in your current console.

    echo $0

  2. To add Flutter to your PATH, expand the entry for your default shell, then choose the command.

    Show bash command 
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.bash_profile
    Show zsh command 
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.zshenv
    Show fish command 
    fish_add_path -g -p ~/development/flutter/bin
    Show csh command 
    echo 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.cshrc
    Show tcsh command 
    echo 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.tcshrc
    Show ksh command 
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile
    Show sh command 
    echo 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile

  3. To apply this change, restart all open terminal sessions.

检查你的开发配置

#

帮助

运行 Flutter doctor

#

flutter doctor 指令将检查 Linux 完整的 Flutter 开发环境的所有组件。

  1. Open 一个 shell.

    打开一个 shell。

  2. 要检查所有组件的安装情况，请运行以下指令。

    flutter doctor

由于你选择为 Web 进行开发，因此不需要 所有 组件。如果你遵循本指南，指令结果应该类似于：

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.29.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.96)
[✓] Connected device (1 available)
[✓] Network resources


! Doctor found issues in 3 categories.

解决 Flutter doctor 的问题

#

当 flutter doctor 指令返回错误时，可能是 Flutter、VS Code、one of the Linux libraries、连接的设备或者网络资源出错。

如果 flutter doctor 指令返回这些组件中的任何一个错误，请使用 verbose 标志再次运行。

flutter doctor -v

查看输出结果，了解可能需要安装的其他软件或者需要执行的其他任务。

如果你更改了 Flutter SDK 或其他相关组件的配置，请 再次运行 flutter doctor 来检查安装。

开始使用 Flutter 开发 Web on Linux 应用

#

恭喜你。 在安装完成所有必要条件和 Flutter SDK 后，你就可以开始开发适用于 Web on Linux 的 Flutter 应用了。

如果你要继续学习之旅，请参考以下指南：

管理 Flutter SDK

#

想要了解管理 Flutter SDK 安装的更多信息，请查阅以下内容。

除非另有说明，本文档之所提及适用于 Flutter 的最新稳定版本，本页面最后更新时间: 2024-10-28。 查看文档源码 或者 为本页面内容提出建议.