Flutter安装与配置（windows）

最新推荐文章于 2025-05-26 11:38:57 发布

weixin_33852020

最新推荐文章于 2025-05-26 11:38:57 发布

阅读量576

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发操作系统开发工具

原文链接：https://juejin.im/post/5c20cbbdf265da611639cd88

本文详细介绍Flutter环境的搭建过程，包括下载安装Flutter SDK、配置环境变量、安装Android Studio及模拟器、安装证书等步骤。同时，介绍了如何使用Android Studio和VScode创建、调试和运行Flutter项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flutter官网下载安装包Flutter SDK

ps: Dart SDK已经捆绑在Flutter SDK中，故无需在单独安装Dart SDK。
将下载的安装包zip解压到你想安装Flutter SDK的路径（如D:\flutter，注意不要将flutter安装到需要一些高权限的路径如C:\Program Files\）
在Flutter安装目录的flutter文件下找到flutter_console.bat，双击它，即可自动启动flutter命令行

打开 “控制面板>用户帐户>用户帐户>更改我的环境变量”，在用户变量下新建两个条目（建议最好使用Flutter社区这个镜像，我是掉了这个坑，但注意官网说也无法保证一直可用）：
- PUB_HOSTED_URL：pub.flutter-io.cn
- FLUTTER_STORAGE_BASE_URL：storage.flutter-io.cn

终端输入：flutter doctor

该命令检查您的环境并在终端窗口中显示报告，这个命令初次运行可能会很慢，Flutter会自动安装所需依赖，并进行编译。建议科学上网。（如果有[!]x标志，表示本行检测没有通过，就需要我们设置或者安装相应的软件了）

官网下载安装包，之前做react-native项目时已经安装过了，这里就不细讲了

打开Andorid Studio，菜单栏File => Settings => Plugins，在搜索框中输入futtler，点击安装，安装完成后，再重启一下Android Studio

ps：上图为已安装过了

终端输入：flutter doctor --android-licenses（注意：提示一律输y）

到此，成功完成Flutter的安装。可以在终端输入：flutter doctor 来检查安装条目是否都成功。

打开Android Studio，菜单栏File => New => New Flutter Project，选择第一个选项Flutter Application（flutter应用）

输入项目名称（注意：项目名称必须是小写，单词之间用下划线隔开），一直点next，最后点finish，系统即可自动创建一个Flutter项目。

在打开的Android Studio中可以看到上一步创建好的Flutter项目。
开启模拟器（右上角的ADV Manager图标按钮）
模拟器运行成功后，点击Android Studio右上角的debug或者run图标按钮。（此步骤需要一点时间，注意观察console区域信息，如下图表示编译成功）
上一步成功编译后，就可在模拟器中看到flutter应用页面了

ps：打开VScode终端快捷键：ctrl+~

在VScode中的终端运行flutter run后，会有一段红色文字的提示，即可按下如下按键（注意：要把鼠标光标放在终端上，再按对应按键）：

 r 键：点击后即可热更新加载（应该是重新加载）。
 p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
 o 键：切换android和ios的预览模式。
 q 键：退出调试预览模式。
复制代码

若觉得按 r 键来热更新代码比较麻烦，可以开启VScode的debug模式，就可以实现真正的热更新了（修改代码保存后，即可在模拟器上立即看到页面改变效果了）

转载于:https://juejin.im/post/5c20cbbdf265da611639cd88