开始在 macOS 上构建 Flutter Web 应用
验证系统要求
#要安装和运行 Flutter,你的 macOS 环境必须满足以下硬件和软件要求。
硬件要求
#你的 macOS Flutter 开发环境必须满足以下最低硬件要求。
要求 | 最低 | 推荐 |
---|---|---|
CPU 内核 | 4 | 8 |
内存(GB) | 8 | 16 |
显示分辨率(像素) | WXGA(1366 x 768) | FHD(1920 x 1080) |
可用磁盘空间(GB) | 2.5 | 2.5 |
软件要求
#要编写和编译用于 Web 的 Flutter 代码,请安装以下软件包。
操作系统
#Flutter 支持在 macOS 11(Big Sur)或更高版本上进行开发。本指南假设您的 Mac 使用 zsh
作为默认 shell。
要验证您的 shell 配置,请展开此部分
与大多数类 Unix 操作系统一样,macOS 可以支持多个 shell,例如 bash
、zsh
和 sh
。从 2019 年 10 月发布的 macOS Catalina(macOS 10.15)开始,Zsh 或 zsh
是 macOS 的默认 shell。
检查并设置 zsh
为默认值
#要验证
zsh
是否已设置为默认的 macOS shell,请运行 目录服务命令行实用程序。dscl . -read ~/ UserShell
该命令应将其响应打印为以下内容。
UserShell: /bin/zsh
您可以跳过其余步骤。
如果您需要安装
zsh
,请按照 此 Wiki 中的步骤操作。如果您需要将默认 shell 更改为
zsh
,请运行chsh
命令。chsh -s `which zsh`
要详细了解 macOS 和 zsh
,请查看 macOS 文档中的 在 Mac 上将 zsh 用作默认 shell。
某些 Flutter 组件需要在运行 Apple 芯片 的 Mac 上进行 Rosetta 2 翻译过程。要在 Apple 芯片上运行所有 Flutter 组件,请安装 Rosetta 2。
sudo softwareupdate --install-rosetta --agree-to-license
开发工具
#下载并安装以下软件包。
- Google Chrome 用于调试 Web 应用程序的 JavaScript 代码。
- Git 2.27 或更高版本用于管理源代码。要检查您是否已安装
git
,请在终端中键入git version
。如果您需要安装git
,请键入brew install git
。
上述软件的开发人员为这些产品提供支持。要解决安装问题,请查阅该产品的文档。
当您运行当前版本的 flutter doctor
时,它可能会列出其中一个软件包的不同版本。如果是这样,请安装它建议的版本。
文本编辑器或集成开发环境
#您可以使用任何文本编辑器或集成开发环境 (IDE) 结合 Flutter 的命令行工具来构建应用程序。
使用带有 Flutter 扩展或插件的 IDE 可以提供代码完成、语法高亮显示、窗口小部件编辑辅助、调试和其他功能。
常用的选项包括
- Visual Studio Code 1.77 或更高版本,以及 VS Code 的 Flutter 扩展。
- Android Studio 2023.3.1(Jellyfish)或更高版本,以及 IntelliJ 的 Flutter 插件。
- IntelliJ IDEA 2023.3 或更高版本,以及 IntelliJ 的 Flutter 插件 和 IntelliJ 的 Android 插件。
安装 Flutter SDK
#要安装 Flutter SDK,您可以使用 VS Code Flutter 扩展或自己下载并安装 Flutter 包。
使用 VS Code 安装 Flutter
#要使用这些说明安装 Flutter,请验证您是否已安装 Visual Studio Code 1.77 或更高版本,以及 VS Code 的 Flutter 扩展。
提示 VS Code 安装 Flutter
#启动 VS Code。
要打开**命令面板**,请按 Command + Shift + P。
在**命令面板**中,键入
flutter
。选择**Flutter: 新建项目**。
VS Code 会提示您在计算机上找到 Flutter SDK。
如果您已安装 Flutter SDK,请点击**查找 SDK**。
如果您尚未安装 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.
此下载需要几分钟。如果您怀疑下载已挂起,请点击**取消**,然后重新开始安装。
完成后,**输出**面板会显示。
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 通知。
如果您同意,请点击**确定**。
要在所有终端窗口中启用
flutter
- 关闭,然后重新打开所有终端窗口。
- 重新启动 VS Code。
下载并安装 Flutter
#要安装 Flutter,请从其存档中下载 Flutter SDK 包,将该包移动到您要存储的位置,然后提取 SDK。
下载以下安装包以获取 Flutter SDK 的最新稳定版本。
对于其他发布渠道和旧版本,请查看 SDK 存档。
Flutter SDK 应下载到 macOS 默认下载目录:
~/Downloads/
。创建要安装 Flutter 的文件夹。
考虑在
~/development/
中创建目录。将文件解压缩到要存储 Flutter SDK 的目录中。
unzip ~/Downloads/flutter_sdk_v1.0.0.zip \ -d ~/development/
完成后,Flutter SDK 应位于
~/development/flutter
目录中。
将 Flutter 添加到您的 PATH
#要在终端中运行 Flutter 命令,请将 Flutter 添加到 PATH
环境变量。本指南假设您的 Mac 运行最新的默认 shell,即 zsh
。Zsh 使用 .zshenv
文件进行 环境变量 设置。
启动您喜欢的文本编辑器。
如果存在,请在文本编辑器中打开 Zsh 环境变量文件
~/.zshenv
。如果不存在,请创建~/.zshenv
。复制以下行并将其粘贴到
~/.zshenv
文件的末尾。bashexport PATH=$HOME/development/flutter/bin:$PATH
保存
~/.zshenv
文件。要应用此更改,请重新启动所有打开的终端会话。
如果您使用其他 shell,请查看 此关于设置 PATH 的教程。
检查你的开发设置
#运行 Flutter doctor
#flutter doctor
命令验证 macOS 的完整 Flutter 开发环境的所有组件。
打开您的终端。
要验证所有组件的安装,请运行以下命令。
flutter doctor
由于您选择开发 Web,因此您不需要所有组件。如果您按照本指南操作,则命令的结果应类似于
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, on macOS 14.4.0 23E214 darwin-arm64, locale en)
[!] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[!] Xcode - develop for iOS and macOS (Xcode not installed)
[!] Android Studio (not installed)
[✓] VS Code (version 1.95)
[✓] Connected device (1 available)
[✓] Network resources
! Doctor found issues in 3 categories.
排查 Flutter doctor 问题
#当 flutter doctor
命令返回错误时,可能是 Flutter、VS Code、连接的设备或网络资源引起的。
如果 flutter doctor
命令返回任何这些组件的错误,请使用详细标志再次运行它。
flutter doctor -v
检查输出以查看可能需要安装的其他软件或需要执行的其他任务。
如果更改了 Flutter SDK 或其相关组件的配置,请再次运行 flutter doctor
以验证安装。
开始使用 Flutter 在 macOS 上开发 Web 应用
#恭喜。安装了所有先决条件和 Flutter SDK 后,您就可以开始在 macOS 上为 Web 开发 Flutter 应用程序了。
要继续您的学习之旅,请查阅以下指南
管理你的 Flutter SDK
#要详细了解如何管理 Flutter SDK 安装,请查阅以下资源。
除非另有说明,否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-10-28。 查看源代码 或 报告问题。