Flutter安装与配置(windows)

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

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

Flutter安装

下载安装Flutter SDK

  1. flutter官网下载安装包Flutter SDK

    ps: Dart SDK已经捆绑在Flutter SDK中,故无需在单独安装Dart SDK。

  2. 将下载的安装包zip解压到你想安装Flutter SDK的路径(如D:\flutter,注意不要将flutter安装到需要一些高权限的路径如C:\Program Files\)

  3. 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击它,即可自动启动flutter命令行

更改环境变量

  1. 打开 “控制面板>用户帐户>用户帐户>更改我的环境变量”,在用户变量下新建两个条目(建议最好使用Flutter社区这个镜像,我是掉了这个坑,但注意官网说也无法保证一直可用):

flutter doctor测试

终端输入:flutter doctor

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

安装Android Studio,并创建模拟器(avd虚拟机)

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

Android Studio安装Flutter插件

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

ps:上图为已安装过了

安装Android证书

终端输入:flutter doctor --android-licenses(注意:提示一律输y)

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

运行Flutter

  1. 打开Android Studio,菜单栏File => New => New Flutter Project,选择第一个选项Flutter Application(flutter应用)

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

  1. 在打开的Android Studio中可以看到上一步创建好的Flutter项目。

  2. 开启模拟器(右上角的ADV Manager图标按钮)

  3. 模拟器运行成功后,点击Android Studio右上角的debug或者run图标按钮。(此步骤需要一点时间,注意观察console区域信息,如下图表示编译成功)

  4. 上一步成功编译后,就可在模拟器中看到flutter应用页面了

使用VScode编写并运行Flutter应用

  1. 在VScode中安装Flutter插件(Dart插件已捆绑到Flutter插件中了,故无需再单独安装Dart)

  2. 模拟器开启下,使用VScode打开Flutter项目,在VScode终端输入:flutter run,即可在模拟器下打开该应用页面了。

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

VScode中调试Flutter应用

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

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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值