跳至主要内容
内容

开始在 macOS 上构建 Flutter Web 应用

内容

验证系统要求

#

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

硬件要求

#

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

要求最低推荐
CPU 内核48
内存（GB）816
显示分辨率（像素）WXGA（1366 x 768）FHD（1920 x 1080）
可用磁盘空间（GB）2.52.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 为默认值

#

  1. 要验证 zsh 是否已设置为默认的 macOS shell，请运行 目录服务命令行实用程序。

    dscl . -read ~/ UserShell

    该命令应将其响应打印为以下内容。

    UserShell: /bin/zsh

    您可以跳过其余步骤。

  2. 如果您需要安装 zsh，请按照 此 Wiki 中的步骤操作。

  3. 如果您需要将默认 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 可以提供代码完成、语法高亮显示、窗口小部件编辑辅助、调试和其他功能。

常用的选项包括

安装 Flutter SDK

#

要安装 Flutter SDK，您可以使用 VS Code Flutter 扩展或自己下载并安装 Flutter 包。

使用 VS Code 安装 Flutter

#

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

提示 VS Code 安装 Flutter

#

  1. 启动 VS Code。

  2. 要打开**命令面板**，请按 Command + Shift + P。

  3. 在**命令面板**中，键入 flutter。

  4. 选择**Flutter: 新建项目**。

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

    1. 如果您已安装 Flutter SDK，请点击**查找 SDK**。

    2. 如果您尚未安装 Flutter SDK，请点击**下载 SDK**。

      如果您尚未按照 开发工具先决条件 中的说明安装 Git，此选项会将您发送到 Flutter 安装页面。

  6. 当出现**选择哪个 Flutter 模板？**提示时，请忽略它。按 Esc。在检查开发设置后，您可以创建一个测试项目。

下载 Flutter SDK

#

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

    VS Code 会将您置于用户配置文件中以开始。选择其他位置。

    考虑 ~/development/

  2. 点击**克隆 Flutter**。

    下载 Flutter 时，VS Code 会显示此弹出通知

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

    此下载需要几分钟。如果您怀疑下载已挂起，请点击**取消**，然后重新开始安装。

  3. 完成后，**输出**面板会显示。

    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?

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

    如果您同意，请点击**确定**。

  5. 要在所有终端窗口中启用 flutter

    1. 关闭，然后重新打开所有终端窗口。
    2. 重新启动 VS Code。

下载并安装 Flutter

#

要安装 Flutter，请从其存档中下载 Flutter SDK 包，将该包移动到您要存储的位置，然后提取 SDK。

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

    英特尔处理器Apple 芯片
    (加载中...)(加载中...)

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

    Flutter SDK 应下载到 macOS 默认下载目录：~/Downloads/。

  2. 创建要安装 Flutter 的文件夹。

    考虑在 ~/development/ 中创建目录。

  3. 将文件解压缩到要存储 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 文件进行 环境变量 设置。

  1. 启动您喜欢的文本编辑器。

  2. 如果存在，请在文本编辑器中打开 Zsh 环境变量文件 ~/.zshenv。如果不存在，请创建 ~/.zshenv。

  3. 复制以下行并将其粘贴到 ~/.zshenv 文件的末尾。

    bash
    export PATH=$HOME/development/flutter/bin:$PATH

  4. 保存 ~/.zshenv 文件。

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

如果您使用其他 shell，请查看 此关于设置 PATH 的教程。

检查你的开发设置

#

help 帮助

运行 Flutter doctor

#

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

  1. 打开您的终端。

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

    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。 查看源代码 或 报告问题。