开始在 Windows 上构建 Flutter web 应用

开始在 Windows 上构建 Flutter web 应用

Flutter 起步教程chevron_right安装和环境配置chevron_rightWindowschevron_right开发 Web 应用

系统要求

#

在安装和运行 Flutter 前，你的 Windows 环境必须满足以下要求：

硬件要求

#

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

要求	最低	推荐
x86_64 CPU 核心数	4	8
内存 (GB)	8	16
显示器分辨率（像素）	WXGA (1366 x 768)	FHD (1920 x 1080)
可用磁盘空间 (GB)	2.5	2.5

软件要求

#

要为 web 编写和编译 Flutter 代码，你必须安装以下版本的 Windows 以及所列出的软件包。

lightbulb小提示

你无需单独安装 Dart，因为 Flutter SDK 包含了完整的 Dart SDK。

操作系统

#

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

开发工具

#

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

• Git for Windows 2.27 或更高的版本来管理源代码。
• Google Chrome 调试 Web 应用的 JavaScript 代码。

上述软件的开发商为这些产品提供支持。如果需要排查安装的问题，请查阅该产品的文档。

当你在当前版本运行 flutter doctor 的时候，它可能会列出这些软件包的其他不同版本。如果出现这种情况，请安装它推荐的版本。

配置文本编辑器或 IDE

#

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

使用带有 Flutter 扩展或插件的 IDE 会提供代码自动补全、语法高亮、widget 编写辅助、调试以及其他功能。

以下是热门的扩展插件：

• Visual Studio Code 1.77 或更高版本使用 Flutter extension for VS Code。
• Android Studio 2023.3.1 (Jellyfish) 或更高版本使用 Flutter plugin for IntelliJ.
• IntelliJ IDEA 2023.3 或更高版本使用 Flutter plugin for IntelliJ.

bolt推荐

Flutter 团队推荐安装 Visual Studio Code 1.77 或更高版本并搭配 Flutter extension for VS Code。这样搭配可以简化 Flutter SDK 的安装。

安装 Flutter SDK

#

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

• 使用 VS Code 安装
• 自行下载安装

使用 VS Code 安装 Flutter

#

在使用以下流程来安装 Flutter 前，请确保你已经安装 Visual Studio Code 1.77 或更高版本，以及 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 for Windows ，单击该按钮后会导航至 Flutter 安装页面。

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

下载 Flutter SDK

#

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

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

   请考虑 %USERPROFILE% 或 C:\dev 这样的位置。

   warning请注意

   不要将 Flutter 安装到以下情况的目录或路径中：

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

   例如，C:\Program Files 路径就是以上情况。

2. 单击 Clone Flutter。

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

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

   content_copy

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

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

   Checking Dart SDK version...
   Downloading Dart SDK from the Flutter engine ...
   Expanding downloaded archive...
   

   content_copy

   成功后，VS Code 会弹出该通知：

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

   content_copy

   初始化时，输出 (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...
   

   content_copy

   该进程还会运行 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?
   

   content_copy

4. 单击 Add SDK to PATH。

   成功后会显示通知：

   The Flutter SDK was added to your PATH
   

   content_copy

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

   如果你同意，请单击 OK。

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

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

检查你的开发配置

#

help帮助

运行 Flutter doctor

#

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

1. 打开 PowerShell。

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

   PS C:> flutter doctor
   

   content_copy

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

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.5, 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.

content_copy

解决 Flutter doctor 的问题

#

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

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

PS C:> flutter doctor -v

content_copy

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

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

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

#

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

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

• 学习如何编写第一个 Flutter 应用
• Flutter 基础知识文档

管理 Flutter SDK

#

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

• 升级 Flutter
• 添加 Android 编译工具
• 添加 Windows 桌面编译工具
• 卸载 Flutter