# 从零开始创建 Flutter Web 项目（附 VS Code 插件推荐）

在进行 Flutter Web 开发之前，我们需要先创建一个支持 Web 平台的 Flutter 项目，并配置好开发环境。本文将一步步带你完成创建流程以及推荐必要的 VS Code 插件。

---

一、创建 Flutter Web 项目

1️⃣ 使用命令创建 Flutter 工程（支持 Web）

在终端中执行以下命令：

flutter create --platforms web 项目名称

参数说明：

• flutter create：创建新的 Flutter 项目
• --platforms web：指定项目支持 Web 平台
• 项目名称：你自己的项目名称（例如：my_flutter_web）

示例：

flutter create --platforms web my_flutter_web

执行完成后，你会看到项目目录结构中包含 web 文件夹，这代表该项目已支持 Web 运行。

---

二、安装 VS Code 必备插件

为了提升开发效率，推荐在 VS Code 中安装以下插件。

---

1️⃣ Flutter 插件

• 插件名称：Flutter

• 版本示例：v3.116.0

• 功能：

  • 提供 Flutter 开发支持
  • 调试功能
  • Dart 语言支持
  • 热重载支持

安装后，你可以直接在 VS Code 中运行、调试 Flutter Web 项目。

---

2️⃣ Awesome Flutter Snippets 插件

• 插件名称：Awesome Flutter Snippets

• 版本示例：v3.0.0

• 功能：

  • 提供常用 Flutter 代码片段
  • 快速生成 Widget 模板
  • 提高开发效率

例如输入：

stful

即可快速生成一个 StatefulWidget 模板。

---

三、验证 Web 运行环境

创建完成后，可以在项目目录下运行：

flutter run -d chrome

如果成功在浏览器中打开页面，说明 Web 环境已经配置完成。

---

四、小结

创建 Flutter Web 项目的核心步骤：

1. 使用 flutter create --platforms web 创建项目
2. 安装 VS Code 的 Flutter 插件
3. 安装 Awesome Flutter Snippets 提高效率
4. 使用 flutter run -d chrome 运行项目

至此，一个完整的 Flutter Web 开发环境就搭建完成了 🎉

---