Start building Flutter web apps on Linux
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 11 or later and Ubuntu 22.04 or later LTS .
Development tools
#To develop Flutter on Linux:
-
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
-
Install Google Chrome to debug JavaScript code for web apps.
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:
- Visual Studio Code with the Flutter extension for VS Code.
- Android Studio with the Flutter plugin for IntelliJ.
- IntelliJ IDEA with the Flutter plugin for IntelliJ.
安装 Flutter SDK
#你可以使用 VS Code Flutter 扩展或自行下载安装 Flutter 压缩包,来安装 Flutter SDK。
使用 VS Code 安装 Flutter
#在使用以下流程来安装 Flutter 前,请确保你已经安装 Visual Studio Code 以及 Flutter extension for VS Code。
根据 VS Code 的提示,安装 Flutter
#-
启动 VS Code。
-
打开 命令面板 (Command Palette),按下快捷键 Control + Shift + P。
-
在 命令面板 (Command Palette) 中输入
flutter
。 -
选择 Flutter: New Project。
-
VS Code 会提示你在计算机上找到 Flutter SDK。
-
如果你已经安装 Flutter SDK,请单击 Locate SDK。
-
如果你没有安装 Flutter SDK, 请单击 Download SDK。
如果你没有按照 开发工具的必要条件 安装 Git ,单击该按钮后会导航至 Flutter 安装页面。
-
-
当提示 Which Flutter template? 的时候,请忽略它。可以按下 Esc。你可以在检查完开发配置后创建初始测试项目。
下载 Flutter SDK
#-
当对话框 Select Folder for Flutter SDK 显示时,选择你想要安装 Flutter 的位置。
VS Code 会打开你默认的位置。你可以选择其他位置。
请考虑
~/development/
这样的位置 -
单击 Clone Flutter。
在下载 Flutter 时,VS Code 会弹出这些通知:
Downloading the Flutter SDK. This may take a few minutes.
Initializing the Flutter SDK. This may take a few minutes.
下载和安装需要一些时间。如果你怀疑下载被挂起,请单击 Cancel 取消下载后,再重新尝试安装。
Flutter 安装成功后,VS Code 会弹出该通知:
Do you want to add the Flutter SDK to PATH so it's accessible in external terminals?
-
单击 Add SDK to PATH。
成功后会显示通知:
The Flutter SDK was added to your PATH
-
VS Code 可能会显示一则 Google Analytics 的通知。
如果你同意,请单击 OK。
-
在所有 a shell 窗口中启用
flutter
:-
关闭,然后重新打开所有 a shell 窗口。
-
重新启动 VS Code。
-
下载并安装 Flutter
#从归档列表中下载 Flutter SDK 压缩包,将压缩包移动到你想要的位置,然后解压 SDK,以此来安装 Flutter。
-
下载以下 Flutter SDK 最新 stable 版本的压缩包。
关于其他发布渠道和旧版本,请查阅 Flutter SDK 归档列表。
Flutter SDK 应该会下载至 Linux 默认下载目录:
~/Downloads/
。 -
创建一个文件夹,用于安装 Flutter。
可以考虑在
~/development/
中创建一个目录。 -
将 Flutter SDK 压缩文件 (zip) 解压到你想要存储的目录中。可以使用以下指令进行解压。
tar -xf ~/Downloads/flutter_sdk_v1.0.0.zip -C ~/development/
完成后,Flutter SDK 应该会位于
~/development/flutter
目录中。
将 Flutter 添加至 PATH
#
To run Flutter commands in a shell,
add Flutter to the PATH
environment variable.
-
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
-
To add Flutter to your
PATH
, expand the entry for your default shell, then choose the command.Show
bash
commandecho 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.bash_profile
Show
zsh
commandecho 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.zshenv
Show
fish
commandfish_add_path -g -p ~/development/flutter/bin
Show
csh
commandecho 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.cshrc
Show
tcsh
commandecho 'setenv PATH "$HOME/development/flutter/bin:$PATH"' >> ~/.tcshrc
Show
ksh
commandecho 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile
Show
sh
commandecho 'export PATH="$HOME/development/flutter/bin:$PATH"' >> ~/.profile
-
To apply this change, restart all open terminal sessions.
检查你的开发配置
#运行 Flutter doctor
#flutter doctor
指令将检查 Linux 完整的
Flutter 开发环境的所有组件。
-
打开 shell。
-
要检查所有组件的安装情况,请运行以下指令。
flutter doctor
由于你选择为 Web 进行开发,因此不需要 所有 组件。如果你遵循本指南,该指令会将你设置完成的工具和平台输出 [✓]
。
解决 Flutter doctor 的问题
#当 flutter doctor
指令返回错误时,可能是 Flutter、VS Code、Linux 库中的一个、连接的设备或者网络资源出错。
如果 flutter doctor
指令返回这些组件中的任何一个错误,请使用 verbose 标志再次运行。
flutter doctor -v
查看输出结果,了解可能需要安装的其他软件或者需要执行的其他任务。
如果你更改了 Flutter SDK 或其他相关组件的配置,请 再次运行 flutter doctor
来检查安装。
开始使用 Flutter 开发 Linux 上的 Web 应用
#恭喜你。 在安装完成所有必要条件和 Flutter SDK 后,你就可以开始开发适用于 Linux 上的 Web 的 Flutter 应用了。
如果你要继续学习之旅,请参考以下指南:
管理 Flutter SDK
#想要了解管理 Flutter SDK 安装的更多信息,请查阅以下内容。
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2025-05-19。 查看文档源码 或者 为本页面内容提出建议.