Flutter 环境搭建实录

Flutter环境搭建日志,记录了我在 Windows 10 系统上从零开始配置 Flutter 开发环境的完整过程。期间遇到了网络连接、环境变量、sdk下载、Android Studio 配置等一系列问题,最终全部解决。

🖥️ 我的电脑配置

|--------|---------------------------------------|
| 硬件 | 配置 |
| 操作系统 | Windows 10 专业版 64位 (22H2) |
| CPU | Intel Core i7-8700 @ 3.20GHz (6核12线程) |
| 内存 | 16.0 GB |
| 硬盘 | 512GB SSD(可用空间约262GB) |
| 显卡 | Intel UHD Graphics 630 |

📦 需要安装的软件清单

|----------------|------------------------------------------|
| 软件 | 用途 |
| VS Code | 代码编辑器(写 Flutter 代码的地方) |
| Flutter SDK | Flutter 核心开发工具包 |
| Dart SDK | 随 Flutter SDK 一起安装 |
| Android Studio | 提供 Android SDK 和模拟器(不一定要用来写代码) |
| Git | Flutter SDK 依赖 Git 进行版本管理**(已安装,省略这一步)** |

📋 快速配置清单

步骤 操作 备注
1 安装 VS Code 官网下载
2 安装 Flutter 核心插件 VS Code 扩展商店
3 安装 Android Studio 官网下载
4 验证环境 flutter doctor -v

1.安装 VS Code

直接官网下载,按照官网的步骤安装就好了

配置用户设置文件**settings.json**文件

  1. 在 VS Code 中,按下快捷键**Ctrl + Shift + P**

  2. 在弹出的输入框中,输入 Preferences: Open Settings (JSON),点击它打开文件

  3. 在打开的 settings.json 文件中,找到 **"dart.flutterSdkPath"**这一项。如果不存在就手动添加。

  4. 将 **"dart.flutterSdkPath"**的值改成你的 Flutter SDK 存放的实际路径

bash 复制代码
{
    "dart.flutterSdkPath": "D:\\flutter" 
}

2.安装 Flutter 插件(核心插件)

VS Code 扩展商店中搜索 "flutter",点击安装由官方发布的 flutter 插件(自动安装 Dart插件)

下载完成后会弹出一个提示:

复制代码
The Flutter SDK was downloaded. Would you like to add it to your PATH?

点击了 Add SDK to PATH ,那么它会自动帮你配置好环境变量PATH ,添加 D:\flutter\bin

推荐同时安装 Flutter Widget Snippets 插件

下载时,发现初始化非常缓慢

点击 "Cancel" 按钮,重新打开 VS Code,在终端输入命令

bash 复制代码
flutter doctor -v

这一步操作的是手动运行 flutter doctor,**-v**是 verbose(详细模式),会打印出进度信息

问题分析:VS Code 在尝试从 pub.dev 下载依赖时遇到了网络问题(socket error

此时我想验证一下电脑上到底有没有装好 flutter sdk

打开D盘查看 flutter/ bin文件夹下flutter.batSDK 文件在

打开CMD窗口验证,输入以下命令

bash 复制代码
flutter --version

问题分析:你的网络无法正常访问 pub.dev( Flutter 的官方包仓库),导致 flutter --version 卡在下载依赖这一步。

Ctrl + C 终止,检查vpn是否关闭 ,然后临时设置国内镜像 (仅当前窗口有效)

在CMD输入命令(一行一行地输入并回车)

bash 复制代码
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter --version

Flutter 从国内的镜像站下载依赖,速度快了很多,不会再出现 **socket error**的错误

以下命令在CMD中操作(是一行一行地输入并回车)

bash 复制代码
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter --version
flutter doctor -v

以下命令在VS Code的终端操作(是一行一行地输入并回车)

bash 复制代码
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter --version
flutter doctor -v

好的,重新回到VS Code的终端窗口

📋 诊断结果解读
检查项 状态 说明
Flutter SDK ✅ 完美 已正确安装,并使用了国内镜像,网络配置很棒。
Windows 系统 ✅ 完美 符合所有开发要求。
Chrome 浏览器 ✅ 完美 可以立即进行 Web 应用开发。
Android 工具链 ❌ 缺失 这是主要问题,需要安装 Android Studio 来提供 SDK 和模拟器。
Visual Studio ⚠️ 组件缺失 只影响 Windows 桌面应用开发,可以先不管
网络资源 ⚠️ 连接超时 检查 GitHub 时超时,不影响国内镜像的使用

3.安装 Android Studio

直接官网下载,按照官网的步骤安装就好了

安装完成,在vs code终端再次查看还缺少哪些开发必备的组件

bash 复制代码
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter doctor -v
📋 诊断结果解读
检查项 状态 说明
Flutter SDK ✅ 完美 已正确安装,镜像配置成功
Windows 系统 ✅ 完美 符合所有要求
Chrome ✅ 完美 可进行 Web 开发
网络资源 ✅ 完美 所有资源可访问
Android 工具链 ⚠️ 两个小问题 缺少 cmdline-tools + 许可证未同意
Visual Studio ⚠️ 组件缺失 只影响 Windows 桌面应用,可暂缓
安装 cmdline-tools

打开 Android Studio 的 SDK Manager

切换到 SDK Tools 选项卡,勾选 "Android SDK Command-line Tools (latest)"

点击"Apply"按钮,在弹出的确认对话框中点击 "OK",下载完成后点击 "Finish"

同意 Android 许可证

在 VS Code 终端中运行:

bash 复制代码
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"
flutter doctor --android-licenses

然后一路输入 y(yes),直到所有许可证都同意完毕。

4.最后验证

📋 诊断结果解读

检查项 状态 说明
Flutter SDK ✅ 完美 版本 3.44.6,镜像配置成功
Windows 系统 ✅ 完美 符合所有要求
Android 工具链 已修复! SDK 已安装,所有许可证已同意
Chrome ✅ 完美 可进行 Web 开发
Connected Device ✅ 完美 可运行在 Windows、Chrome、Edge
Network Resources ✅ 完美 所有网络资源可访问
Visual Studio ⚠️ 可忽略 仅用于 Windows 桌面应用开发

💡建议分享

  • 国内网络环境一定要配置镜像,这是最关键的一步,否则各种超时错误会让你崩溃
  • 不要同时开 VPN,配置了国内镜像后直连反而更快
  • 环境变量配置后记得重启 VS Code,否则终端不会生效
  • 遇到报错先看红色文字,90% 的问题都写在了报错信息里

现在环境已经就绪,接下来就可以正式学习 Flutter 开发了

如果这篇文章对你有帮助,欢迎收藏或分享给其他正在搭建 Flutter 环境的朋友。祝编码愉快!🚀

相关推荐
GitLqr19 小时前
iOS 27 强制要求 UISceneDelegate:UIKit 和 Flutter 开发者该如何应对?
flutter·ios·全栈
2501_915106321 天前
SwiftUI项目创建详解:使用Xcode从零开始创建第一个App项目
ide·vscode·ios·swiftui·个人开发·xcode·敏捷流程
蜡台1 天前
Flutter HTTP 请求完整详解
网络协议·flutter·http·dart
9765033351 天前
iOS 上架/审核 4.3a Cocos 2026最新方案解读
flutter·ios·swift·cocos2d·ios开发
2501_916007471 天前
IDE 是什么?集成开发环境详解与 iOS 开发选型指南
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
FungLeo2 天前
Flutter 接入 Alice 调试浮窗:一个顶层 final 抢跑,把 release 网络整没了
网络·flutter
2601_960906722 天前
AI研发加速中式及泛亚洲
人工智能·vscode·macos·sublime text·phpstorm
恋猫de小郭2 天前
Flutter hit,一个可以灵活控制溢出点击的第三方包
android·前端·flutter
啦啦啦!2 天前
虚拟机如何接入Codex并配置中转站(vscode插件版)
linux·vscode·ubuntu·编辑器
不喝水的鱼儿3 天前
本地部署 260K 上下文 Qwen-3.6-35B-A3B 与 Ornith-1.0-35B 模型及 VSCode Copilot 参数调优记录
ide·vscode·语言模型·copilot·llama