ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Windows 上 Flutter 环境搭建与常见报错解决指南

Windows 上 Flutter 环境搭建与常见报错解决指南 先说结论这篇东西是写给所有想在 Windows 上正经用 Flutter 干活的朋友尤其是那种“装到一半心态崩了”“flutter doctor 一堆红叉”“项目一跑就报 Gradle 错”的情况。我把自己从零开始搭 VSCode Flutter Dart 环境的过程、踩过的坑、最后怎么解决的全部按步骤写出来尽量让你照着走一遍就能跑通。先说下我自己的背景平时主要做客户端开发和跨平台方案调研Flutter 不是我的主力语言但我用它做过几个工具型 App 和 Windows 桌面包。所以这篇文章不会教你写 Dart 语法也不会讲 Flutter 框架的 Widget 树而是聚焦在“环境怎么搭、为什么这么搭、出错了去哪里查、查到了怎么改”这一整条线上。1. 环境准备与整体思路1.1 先搞清楚 Flutter 在 Windows 上到底需要哪些东西很多新手上来直接下载 Flutter SDK然后配完 PATH 就跑flutter doctor结果一堆红叉心态直接炸。其实 Flutter 在 Windows 上不是孤立运行的它要依赖好几层工具链。我把依赖关系用大白话理顺一下Flutter SDK 本身是一套命令行工具 Dart 运行时 各种平台引擎。如果你想跑 Android 应用需要 Android SDK通常由 Android Studio 提供。如果你想跑 Windows 桌面应用需要 Visual Studio 的 C 桌面开发组件。如果你想跑 Web 应用需要 Chrome 浏览器。无论哪种平台你在 VSCode 里写代码时都需要 Flutter 和 Dart 两个插件配合。所以安装顺序非常关键我推荐的顺序是Git → JDK可选但有备无患→ Android Studio含 Android SDK→ Visual Studio只要 C 桌面负载→ Flutter SDK → VSCode 插件。1.2 为什么必须按顺序来有人说我先装 Flutter 再装 Android Studio 行不行行但你会多折腾很多次flutter doctor的刷新和 PATH 配置。我建议按顺序来的核心原因是Flutter SDK 在安装配置完以后flutter doctor会一次性检测所有依赖项你先把依赖装好再跑这个检测就能一步到位看到哪些是绿的、哪些需要补什么。反过来你会陷入“装完 Flutter → 检测 → 缺 Android SDK → 去装 → 再检测 → 缺 VS → 再装”的循环特别消耗耐心。另外一个容易忽略的点是Flutter 官方要求 Git 必须提前装好因为 Flutter SDK 的后续升级和依赖拉取都要靠 Git 完成。Windows 上如果你提前装了 Git Bash很多命令行操作也会顺手一些。2. Flutter SDK 下载与配置2.1 下载哪个版本、从哪里下载Flutter 的下载方式有两种一种是官网下载 ZIP 压缩包一种是 Git 克隆仓库。我强烈建议普通用户直接下载 ZIP 包原因很简单Git 克隆会拉全部分支和历史记录既慢又占空间而且如果你用默认分支有时候会是一个正在开发的预发布版稳定性没保障。下载地址可以直接用 Flutter 官网的 Windows 版本 ZIP 包也可以在配置镜像源后从中国区镜像站下载。我这里特别提醒一句直接在浏览器打开官方下载页面如果网络状态不好下载过程可能断断续续。你应该直接用命令行工具下载支持断点续传的下载工具会更稳。下载完成之后解压。解压目录我建议放在一个路径干净、没有空格和中文、也不在系统盘关键目录的地方。比如D:\flutter或E:\dev\flutter都行但绝对不要放在C:\Program Files这种带空格的路径下面也不要放到桌面或者中文用户名目录里。Flutter 对路径非常敏感空格和中文会导致部分编译工具找不到文件而且报错信息极其隐晦。注意Flutter SDK 目录一旦定了后期尽量不要移动。因为 IDE 和缓存路径都会记录这个位置移动后必须重新执行flutter doctor全部检测一遍部分项目还会因为缓存路径失效出现莫名其妙的编译问题。2.2 环境变量配置PATH 配置解压完成后需要把flutter\bin目录路径加入系统 PATH。这里我说一下 Windows 的 PATH 配置入口防止有人找不到打开“设置” → 搜索“编辑系统环境变量” → 点“环境变量” → 在“系统变量”中找到Path变量 → 点“编辑” → 添加一行填入你的 Flutter bin 目录路径。配置完成后打开一个全新的命令行窗口输入flutter --version如果能显示版本号说明配置成功。这里要提醒一个细节如果命令行窗口是配置 PATH 之前打开的必须关掉重开否则读不到新的环境变量。2.3 配置国内镜像如果你受网络环境影响Flutter 默认的下载源是storage.googleapis.com在部分网络环境下访问非常慢甚至无法访问。这种时候需要给 Flutter 配置两个环境变量让它改用国内镜像地址。我通常这样设置set PUB_HOSTED_URLhttps://pub.flutter-io.cn set FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn在系统环境变量里添加这两个变量之后再重新打开命令行Flutter 下载引擎、Dart 依赖包的时候会快很多。这两个变量一个是给 Dart 包管理用的一个是给 Flutter 引擎和其他大文件用的。注意如果将来你的网络环境恢复正常了这两个变量最好删掉否则可能因为镜像版本更新慢导致依赖拉取失败。2.4 运行 flutter doctor 检查依赖配完环境变量和 PATH核心操作就是执行flutter doctor我第一次跑这个命令的时候等了几分钟因为它在初始化一些缓存和检测工具链。检测结果的每一项含义我拆开说明一下检测项说明正常状态FlutterSDK 本身是否完整绿色对勾Android toolchainAndroid SDK 是否可用绿色对勾ChromeWeb 调试是否可用绿色对勾不写 Web 可选Visual StudioWindows 桌面开发工具链绿色对勾做桌面端必装Android StudioIDE 是否已安装绿色对勾推荐安装VS CodeVSCode 是否已安装绿色对勾Connected device当前是否有可用设备至少一个模拟器或真机如果看到某个项是红叉不要慌看看它具体提示什么。后面我会专门列一章节讲常见问题的处理。3. VSCode 与 Dart 插件环境搭建3.1 VSCode 安装与基础设置如果你的电脑还没有 VSCode从官网下载最新的稳定版安装即可。安装过程中有一个步骤是“选择其他任务”建议把“添加到 PATH”“通过 Code 打开操作”这几个选项全部勾上后面在命令行直接输code就能打开编辑器频繁用到。安装完成后第一件事建议把界面语言切换成中文。但说实话对我来说中英文无所谓很多报错信息还是英文更容易搜索。我选择装中文包纯粹是为了看插件描述方便。操作方式是在扩展商店搜索Chinese Language Pack安装后重启 VSCode 即可。接下来调整几个对 Flutter 开发有帮助的编辑器设置。我常用的几个配置给你一个可以直接抄的 JSON 片段放入 VSCode 的settings.json里{ editor.formatOnSave: true, editor.renderWhitespace: none, editor.minimap.enabled: false, dart.lineLength: 120, dart.previewFlutterUiGuides: true, dart.previewFlutterUiGuidesCustomTracking: true, [dart]: { editor.defaultFormatter: Dart-Code.dart-code, editor.tabSize: 2, editor.insertSpaces: true } }editor.formatOnSave设为 true 之后保存代码会自动格式化用 Flutter 插件接的 dart format 工具能省掉你手动排版的时间。dart.lineLength是控制格式化换行宽度的Flutter 项目里普遍习惯 80 或 120我日常用 120减少不必要的换行。3.2 安装 Flutter 与 Dart 插件VSCode 的扩展配置文件里Flutter 插件和 Dart 插件是两个独立扩展。直接搜索Flutter第一个官方扩展是Dart-Code.flutter安装它会自动联动安装Dart-Code.dart-code这个 Dart 插件。有朋友会问“我是不是只需要装 Flutter 插件不需要手动装 Dart”我的答案是会自动装 Dart但最好手动确认一下 Dart 插件也在已安装列表里。因为有时候自动联动会失败尤其是 VSCode 版本比较旧的时候。装完插件后有一个关键步骤重新加载 VSCode 窗口。重启后在 VSCode 命令面板输入Flutter: Doctor会看到和命令行flutter doctor一样的结果。这一步的作用是确认 VSCode 能正确识别你已经安装的 Flutter SDK。如果 VSCode 提示“未找到 Flutter SDK”你需要检查一下 VSCode 的设置项dart.flutterSdkPath是否指向了正确的 SDK 目录。有些新版本从 PATH 里自动找但如果你配置过多个 Flutter 版本最好还是显式指定一下。3.3 VSCode 里连接设备与调试插件装好之后VSCode 左下角会出现一个设备选择区域可以在这里切换要运行的设备Windows、Chrome、Android 模拟器、Edge 等。这个设计比命令行flutter run -d xxx要直观得多尤其是刚入门的新手不用记设备 ID。启动调试是直接按F5或者通过菜单“运行与调试”选择 Flutter 项目。VSCode 会先自动执行flutter run然后打开调试控制台。这里有个常见的坑如果项目目录没有正确以 Android 工程结构初始化VSCode 会提示“No Flutter project detected”这时候要从命令行先跑一次flutter create .生成标准目录再回 VSCode 打开。4. 创建并运行第一个 Flutter 项目4.1 命令行创建项目等前面的环境都通了就可以新建一个 Flutter 项目试试手。我最常用的命令格式是flutter create my_app这个命令会在当前目录下创建名为 my_app 的 Flutter 项目。注意两个细节my_app这个名字必须是全小写加下划线的格式不能有横杠。my-app会报错因为 Dart 包名不允许横杠。默认创建的是一个包含 Android、iOS、Web、Windows、Linux、macOS 全平台目录的完整项目。如果你只做 Android Windows 桌面可以在创建时限平台flutter create --platformsandroid,windows my_app这么做的好处是项目结构更简洁不会有你用不到的平台目录干扰文件搜索。坏处是以后想加 Web 或别的平台需要再补一句flutter create --platformsweb .4.2 在 VSCode 里运行到 Windows 桌面端在 VSCode 打开刚才创建的项目然后在底部状态栏点击设备选择区域选择Windows按F5启动。如果一切正常弹出一个 Windows 原生窗口里面显示默认计数器页面那你整个 Windows 桌面的 Flutter 环境就彻底跑通了。这里如果你的设备列表里没有Windows选项或者启动时报 “Unable to find suitable Visual Studio toolchain” 这类错误不用怀疑就是 Visual Studio 安装时没有把 C 桌面开发组件装上。下面第 5 节我会专门讲这个问题。4.3 配置 Android 模拟器并运行如果你要跑 Android 模拟器需要在 Android Studio 里先创建一个虚拟设备AVD。路径是Android Studio 首页 → “More Actions” → “AVD Manager” → “Create Virtual Device”选择一个你喜欢的机型然后下载对应的系统镜像。这里有个经验系统镜像选x86_64架构的不要选 armeabi-v7a 或者 arm64-v8a因为你是在 x86 的 Windows 上跑模拟器x86_64 镜像的速度和兼容性是最好的。而且下载系统镜像时可能会比较慢建议用 Android Studio 自带的 SDK Manager 触发下载如果网络不好可以配置代理或者等待重试这跟 Flutter 的下载问题本质上是一个套路。创建好 AVD 之后在 VSCode 里按F5之前选择设备为对应的 Android 模拟器。第一次运行时会同步 Gradle 依赖非常耗时我见过新手在这里等 20 分钟还没反应误以为是死锁了。正常现象只要日志在滚动就说明在干活。5. 高频安装配置问题与排查实录5.1 “Unable to find suitable Visual Studio toolchain” 怎么破这个问题在标题里就有也是我见过出现频率最高的一个。出现这个提示的时候先别急着改环境变量也别去下载乱七八糟的 C 编译器。这个问题的本质是Flutter 的 Windows 桌面端引擎需要 Visual Studio 提供的 MSVC 编译器和 Windows SDK而你的电脑上要么没有装 Visual Studio要么装的是没有勾选 C 工作负载的版本。解决方案如下安装 Visual Studio 2022社区版即可免费。在“工作负载”选择界面务必勾选“使用 C 的桌面开发”Desktop development with C。右侧“安装详细信息”里确认Windows 11 SDK和MSVC v143组件被选中默认会选。安装完成后重启电脑然后重新执行flutter doctor。有一些细节我再补充下如果你电脑上原来装了 Visual Studio Code 的用户跟 Visual Studio 这俩名字很像但完全不是一个东西。VSCode 是编辑器Visual Studio 才是提供编译器工具链的 IDE。安装完 Visual Studio 后如果flutter doctor依然报错可以打开“Visual Studio Installer”点“修改”确认 C 桌面开发负载里有没有一些可选的额外组件没装。最稳妥的做法是全部默认 Windows 11 SDK。请不要为了省空间只装“单个组件”里的 MSVC除非你非常确定自己在做什么否则一定会因为缺 SDK 组件导致编译失败。5.2 “You are applying Flutters main Gradle plugin imperatively using the apply script” 的处理这是另一个我私下被问爆的问题而且几乎都在新版本 Flutter 旧模板项目上出现。这句话的完整报错一般长这样You are applying Flutters main Gradle plugin imperatively using the apply script method, which is removed from 3.x.核心原因是Flutter 3.16 之后Android 侧的构建脚本迁移到了新版 Gradle 插件声明方式而你的项目模板尤其是老项目还在用旧的apply script方式。新版本的 Flutter 在用 Gradle 时检测到旧的用法就直接提示你改。解决办法有两种第一种是创建一个新项目把代码导过去。这是最省事的办法。新项目本身就会用新模板不存在这个问题。第二种是如果你必须保留旧项目需要修改android/settings.gradle文件。看看里面有没有这样一行apply script: $flutterRoot/packages/flutter_tools/gradle/app_plugin_loader.gradle删掉这行然后在文件的最前面加上plugins { id dev.flutter.flutter-plugin-loader version 1.0.0 }同时要确认项目根目录的android/build.gradle里的插件声明格式是新的。这里我不建议完全照抄网上所有教程因为不同 Flutter 版本对 Gradle 插件的版本要求有细微差异最好是直接新建一个项目把新旧两个android目录对比一下差异一目了然。5.3 卡在 “Running Gradle task assembleDebug” 很久这个现象在 Android 项目首次编译时特别常见。新手以为卡死了其实只是慢。你可以先观察如果日志在很慢地滚动或者 CPU 占用高那就是在编译等等就好。如果连续 20 分钟一点变化都没有才需要干预。真正解决“慢”的办法是给项目配置国内 Maven 仓库镜像。找到android/build.gradle文件把allprojects或settings.gradle里的repositories加上阿里云镜像。这里给一个可以用的配置示例repositories { google() mavenCentral() maven { url https://maven.aliyun.com/repository/public } maven { url https://maven.aliyun.com/repository/google } maven { url https://maven.aliyun.com/repository/gradle-plugin } }另外要在gradle-wrapper.properties里检查 Gradle 版本是否和你的 Flutter 版本兼容。如果版本不对把 distributionUrl 换成网上的兼容版本。一个简单判断是Flutter 版本越新要求的 Gradle 版本越高。如果下载 Gradle 本身很慢可以手动下载对应的 zip 包放到 Gradle 的缓存目录让它直接解压使用。5.4 flutter doctor 检测到“Android license status unknown”或“cmdline-tools component is missing”这个问题的根源是Flutter 在检查 Android SDK 的时候发现两个东西缺失——命令行工具和未接受的许可证。解决办法打开 Android Studio进入 SDK Manager。在“SDK Tools”标签页勾选Android SDK Command-line Tools (latest)然后点安装。安装完成后回到命令行执行flutter doctor --android-licenses执行后会出现一堆y/n提问全部输入y回车即可。一个小技巧flutter doctor --android-licenses其实只是更新licenses文件如果你执行时报错说找不到sdkmanager说明你的 SDK 目录下确实没有最新的 cmdline-tools。这时候要么回 Android Studio 安装要么把 Android SDK 根目录下的cmdline-tools/latest/bin路径配到 PATH 里。注意路径千万别搞错新版 Android SDK 的 cmdline-tools 目录结构有一个额外的层级直接指到latest/bin是对的。5.5 设备列表找不到模拟器或真机VSCode 里点设备选择列表如果只有 Windows / Chrome没有 Android 模拟器原因通常有两个模拟器没有启动去 Android Studio 的 AVD Manager 启动一个模拟器或者用命令行启动。真机没有开启 USB 调试Android 手机上进入“开发者选项” → “USB 调试”然后用数据线连电脑。注意要在手机弹窗上确认“允许 USB 调试”。我的习惯是能用模拟器尽量用模拟器因为真机调试中 USB 连接不稳定会导致日志断流尤其是换了好几条第三方数据线之后你会发现部分线只充电不传数据这个问题真的会浪费很多时间。5.6 其他零碎坑位汇总我把另外几个频率不高但一旦踩到就很懵的问题列在下面当成一个速查表现象原因处理方式flutter命令提示不是内部或外部命令PATH 没配好检查flutter\bin是否在 PATH确认优先级运行flutter run提示 “Dart Error”依赖未拉取完整执行flutter pub get后重试VSCode 保存时格式化没反应settings.json 里的 formatter 没生效确认默认格式化器设置为 Dart-Code编译时报 “Unable to find git” 或类似提示Git 未安装或不在 PATH安装 Git并把 Git 的 bin 目录加入 PATHAndroid 模拟器启动后黑屏AVD 系统镜像损坏或硬件加速未开删除 AVD 重建确认 BIOS 里开启虚拟化安装 Intel HAXM 或使用 AEHDflutter pub get很慢默认源访问受限配置 PUB_HOSTED_URL 镜像后再执行6. 写在最后的一点经验我见过太多人在环境搭建这一步就放弃了其实 Flutter 本身并不难难的是 Windows 上那套乱七八糟的依赖链——Android Studio 要装、Visual Studio 要装、Git 要装、模拟器要配镜像每个组件单独看都不难但合在一起出现问题排查起来很繁琐。我个人实际调试环境的时候永远会做三件事第一在命令行跑flutter doctor -v而不是不带-v的版本因为-v会输出每一项目录路径和具体版本号排查问题快很多第二每装完一个组件就重启一次命令行窗口避免环境变量缓存导致各种奇奇怪怪的定位错误第三项目目录和 SDK 目录都保持纯英文路径这能帮你躲掉 90% 的路径相关报错。如果你或者身边的朋友正好卡在某个报错上把这篇文章对应的小节翻出来按步骤走一遍大概率能解决。剩下的那 10%多半是谁也说不清的网络或者版本兼容问题那就去 Flutter 官方 GitHub Issues 里搜原文报错通常能找到官方人员的回复。配置环境这件事不存在永远的顺利但只要你知道去哪查、怎么查就已经赢了一半。
返回列表