目录
[1.下载Flutter SDK](#1.下载Flutter SDK)
[2.安装flutter和Awesome Flutter Snippets插件在Trae里面](#2.安装flutter和Awesome Flutter Snippets插件在Trae里面)
一.配置Flutter开发环境
1.下载Flutter SDK
sdk下载 : git clone https://github.com/flutter/flutter.git 注意：务必将flutter包下载到英文目录下
2.配置环境变量
<1.拷贝windows的flutter目录下的bin完整路径
<2.在path路径中添加之前拷贝的bin路径
<3.添加两个环境变量PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL
3.诊断Flutter环境
1.检查flutter版本 : flutter --version
- 诊断flutter环境：
有些都是没有配的所以打差或者感叹号不用担心。
二.创建Flutter项目
1.使用命令创建Flutter.工程(web)
flutter create --platforms web<项目名称>
打开对应目录查看：可以看到在ITEM下面创建了一个flutter_base的目录。
2.安装flutter和Awesome Flutter Snippets插件在Trae里面
3.安装谷歌浏览器并用Trae打开项目
安装谷歌浏览器自己安装：
4.运行项目
<1.打开lib /main.dart文件
<2.点击Run运行到浏览器
出现下面画面就是在web端成功演示运行项目了。
三.Flutter应用目录介绍
当我们创建完项目可以看到如下图所示：
<1.以.开头的文件多半是编辑器自动生产的文件一般都是不用我们去管的。
<2.未来打包的文件会放在build文件夹下。
<3.组件测试等等会在test目录下，主程序等等都是在lib目录下。
<4..gitignore用于配置哪些文件需要被忽略。
<5.pubspec.yaml配置文件可以配置很多的flutter插件或资源都可以在这个文件下配置。
主要是lib目录和pubspec.yaml文件，其他一般我们都无需关注，最多打包的时候用一下build。
四. 总结
本文详细介绍了从零开始搭建 Flutter Web 开发环境并创建第一个项目的完整流程。整个过程可以概括为三个核心阶段：环境配置、项目创建与运行、以及项目结构认知。
第一阶段：环境配置是基石。 我们首先通过 Git 克隆官方仓库获取 Flutter SDK，并强调了将其放置于英文路径下的重要性，这是避免后续各种路径相关错误的关键一步。随后，在 Windows 系统中配置环境变量，包括将 Flutter 的 bin 目录添加到系统 PATH，以及设置 PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL 两个关键变量以确保包管理工具能正常访问国内镜像，这对国内开发者至关重要。最后，通过运行 flutter --version 和 flutter doctor 命令来验证环境是否就绪，即使诊断结果中有未配置项（如 Android 工具链）也不必担心，这并不影响我们进行纯 Web 开发。
第二阶段：项目创建与运行是实践。 我们使用 flutter create --platforms web <项目名> 命令创建了一个支持 Web 平台的 Flutter 工程。接着，在 VSCode（文中提到的"Trae"可能指代此编辑器）中安装了"Flutter"和"Awesome Flutter Snippets"这两个核心插件，它们分别提供了项目创建、运行、调试以及代码片段提示功能，能极大提升开发效率。为了运行 Web 项目，我们还需要安装 Chrome 浏览器。最后，在 VSCode 中打开项目主文件 lib/main.dart，点击运行按钮，成功在浏览器中看到了 Flutter 的默认计数器应用界面，标志着第一个 Flutter Web 项目已成功运行。
第三阶段：理解项目结构是进阶。 新创建的项目包含一系列文件和目录。其中，以点（.）开头的文件多为编辑器或版本控制系统生成的配置文件，通常无需手动修改。build 目录用于存放编译后的输出文件。test 目录用于编写组件测试。而最需要开发者关注的两个核心是：lib 目录，它是存放应用主要 Dart 代码（包括入口文件 main.dart）的地方；以及 pubspec.yaml 文件，它是项目的"心脏"，用于声明项目依赖（插件、库）、资源文件（如图片、字体）和元数据，所有第三方包的引入和版本管理都在此进行。