Skip to main content
Contents

在 Windows 上开始构建 Flutter Web 应用

Contents

验证系统要求

#

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

硬件要求

#

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

要求最低要求建议要求
x86_64 CPU 内核数48
内存 (GB)816
显示分辨率 (像素)WXGA (1366 x 768)FHD (1920 x 1080)
可用磁盘空间 (GB)2.52.5

软件要求

#

要为 web编写和编译 Flutter 代码，您必须拥有以下版本的 Windows 和列出的软件包。

操作系统

#

Flutter 支持 64-bit version of Microsoft Windows 10 或更高版本。这些版本的 Windows 应包含必需的 Windows PowerShell 5 或更高版本。

开发工具

#

下载并安装以下软件包的 Windows 版本：

上述软件的开发人员为这些产品提供支持。要解决安装问题，请参阅该产品的文档。

运行当前版本的 flutter doctor 时，它可能会列出这些软件包中某个软件包的不同版本。如果是这样，请安装它推荐的版本。

配置文本编辑器或 IDE

#

您可以使用任何文本编辑器或集成开发环境 (IDE) 结合 Flutter 的命令行工具来构建 Flutter 应用。

使用带有 Flutter 扩展或插件的 IDE 可以提供代码完成、语法高亮显示、窗口小部件编辑辅助、调试和其他功能。

常用的选项包括：

Install the Flutter SDK

#

To install the Flutter SDK, you can use the VS Code Flutter extension or download and install the Flutter bundle yourself.

使用 VS Code 安装 Flutter

#

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

提示 VS Code 安装 Flutter

#

  1. 启动 VS Code。

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

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

  4. 选择Flutter: 新建项目。

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

    1. 如果您已安装 Flutter SDK，请单击定位 SDK。

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

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

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

下载 Flutter SDK

#

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

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

    考虑使用 %USERPROFILE% 或 C:\dev。

请勿将 Flutter 安装到满足以下一个或两个条件的目录或路径：

  • 路径包含特殊字符或空格。
  • 路径需要提升的权限。

例如，C:\Program Files 都不满足条件。 :::

  1. 单击克隆 Flutter。

    下载 Flutter 期间，VS Code 会显示此弹出式通知：

    正在下载 Flutter SDK。这可能需要几分钟时间。

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

  2. 下载 Flutter 完成后，将显示 输出 面板。

    正在检查 Dart SDK 版本...
正在从 Flutter 引擎下载 Dart SDK ...
正在展开下载的存档...

    成功后，VS Code 会显示此弹出式通知：

    正在初始化 Flutter SDK。这可能需要几分钟时间。

    初始化期间， 输出 面板会显示以下内容：

    正在构建 flutter 工具...
正在运行 pub upgrade...
正在解析依赖项...
已获取依赖项。
正在下载 Material 字体...
正在下载 Gradle 包装器...
正在下载 sky_engine 包...
正在下载 flutter_patched_sdk 工具...
正在下载 flutter_patched_sdk_product 工具...
正在下载 windows-x64 工具...
正在下载 windows-x64/font-subset 工具...

    此过程还会运行 flutter doctor -v。 在此过程的此步骤中， 忽略此输出 。 Flutter Doctor 可能会显示不适用于此快速入门的错误。

    Flutter 安装成功后，VS Code 会显示此弹出式通知：

    是否要将 Flutter SDK 添加到 PATH，以便在外部终端中访问它？

  3. 单击将 SDK 添加到 PATH。

    成功后，会显示一条通知：

    Flutter SDK 已添加到您的 PATH

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

    如果您同意，请单击 确定 。

  5. 要在所有 PowerShell 窗口中启用 flutter：

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

下载并安装 Flutter

#

根据您的操作系统选择相应的步骤：

要安装 Flutter，请从其存档下载 Flutter SDK 包，将包移动到您想要存储的位置，然后解压缩 SDK。

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

    (loading...)

    对于其他发行版通道和较旧的版本，请查看SDK 存档。

    Flutter SDK 应该下载到 Windows 的默认下载目录：%USERPROFILE%\Downloads。

    如果您更改了下载目录的位置，请将此路径替换为该路径。 要查找您的下载目录位置，请查看此Microsoft 社区帖子。

  2. 创建一个可以安装 Flutter 的文件夹。

    考虑在 %USERPROFILE% (C:\Users\{username}) 或 %LOCALAPPDATA% (C:\Users\{username}\AppData\Local) 创建一个目录。

请勿将 Flutter 安装到满足以下一个或两个条件的目录或路径：

  • 路径包含特殊字符或空格。
  • 路径需要提升的权限。

例如，C:\Program Files 都不满足条件。 :::

  1. 将文件解压缩到您想要存储 Flutter SDK 的目录中。

    
  PS C:\> Expand-Archive `
      –Path $env:USERPROFILE\Downloads\flutter_sdk_v1.0.0.zip `
      -Destination $env:USERPROFILE\dev\

    完成后，Flutter SDK 应该位于 C:\user\{username}\dev\flutter 目录中。

更新你的 Windows PATH 变量

#

help 帮助

要在PowerShell中运行 Flutter 命令， 请将 Flutter 添加到 PATH 环境变量中。 本节假设你将 Flutter SDK 安装在 %USERPROFILE%\dev\flutter 目录下。

  1. 按下 Windows + Pause 键。

如果您的键盘上没有 Pause 键，请尝试按下 Windows + Fn + B 键。

将显示 系统 > 关于 对话框。

  1. 点击 高级系统设置 > 高级 > 环境变量...

将显示 环境变量 对话框。

  1. 在**（用户名）的用户变量部分， 查找Path**条目。

    1. 如果该条目存在，双击它。

      将显示 编辑环境变量 对话框。

      1. 双击空行。

      2. 输入 %USERPROFILE%\dev\flutter\bin。

      3. 点击**%USERPROFILE%\dev\flutter\bin** 条目。

      4. 点击 上移 ，直到 Flutter 条目位于列表顶部。

      5. 三次点击 确定 。

    2. 如果该条目不存在，点击新建…。

      将显示 编辑环境变量 对话框。

      1. 在 变量名 框中，输入 Path。

      2. 在 变量值 框中， 输入 %USERPROFILE%\dev\flutter\bin

      3. 三次点击 确定 。

  2. 要启用这些更改， 请关闭并重新打开任何现有的 命令提示符和PowerShell实例。

## 检查您的开发环境

help 帮助

运行 Flutter doctor

#

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

  1. 打开 PowerShell。

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

    PS C:> flutter doctor

正如您选择开发 web，您不需要 所有 组件。 如果您遵循本指南，您的命令结果应类似于：

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.27.0, on Microsoft Windows 11 [Version 10.0.22621.3155], locale en)
[✓] Windows version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[!] Visual Studio - develop Windows apps
[!] 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 命令针对任何这些组件返回错误，请使用详细标志再次运行它。

PS C:> flutter doctor -v

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

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

开始使用 Flutter 开发 web 在 Windows 应用

#

恭喜您。 安装所有先决条件和 Flutter SDK 后，您可以开始为 web 在 Windows 开发 Flutter 应用。

要继续您的学习之旅，请参考以下指南：

管理您的 Flutter SDK

#

要了解有关管理您的 Flutter SDK 安装的更多信息，请参阅以下资源。

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。