这个章节我们学习如何安装
Flutter
,配置Flutter
、Android Studio
环境,做开发的前置工作。
环境搭建有点麻烦,特别是Android环境的安装,没有代理简直就是噩梦,要有耐心一起加油!
Flutter 官网地址
学习阶段: Windows或者macOS(苹果操作系统)都是可以的
开发阶段: 一般需要使用macOS,因为我们需要针对iOS进行调试,通常方便起见还是选择macOS
以我为例,现在就是用 Windows
给大家做演示,学习阶段也使用的事 Windows
。开发阶段我也准备用 Windows
来做开发,公司有同事用的 Mac OS
后期调试会用同事 Mac 调试。
使用Flutter开发,首先我们需要安装一个Flutter的SDK。
为加快 Flutter
的下载以及安装速度,请考虑使用 镜像站点 和 镜像。
Flutter
项目会依赖一些东西,在国内下载这些依赖会有一些慢,所以我们可以将它们的安装源换成国内的(也就是设置国内的镜像)
Windows 用户还是需要修改环境变量
在本例中,flutter pub get
会在任何设置了 PUB_HOSTED_URL
和 FLUTTER_STORAGE_BASE_URL
的终端中去获取 flutter-io.cn
上的 package。
来到Flutter的官网网站,选择最新稳定的Flutter SDK的版本
3.16.8
解压下载好的Flutter SDK 放在你想放置的目录(不用用中文及特殊符号)
Windows环境变量修改:点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
找到Path
,在其中添加 Flutter SDK
目录下 bin
目录
在终端中执行 flutter --version
,出现如下内容,说明安装flutter成功
在将 Path
变量更新后,打开一个新的控制台窗口,然后 flutter doctor
命令。如果它提示有任何的平台相关依赖,那么你就需要按照指示完成这些配置:
Android toolchain - develop for Android devices
X cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
安装好后,我们就可以去创建模拟器:选择 More Actions - Virtual Device Manager
点击 + 号
选择一个你想用的设备
** 选择Android的版本 **
现在发现页面有一个红色文字 HAXM is not installed ,点击去下载
报错: Intel® HAXM installation failed. To install Intel® HAXM follow the instructions found at: https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows
我这里的报错原因:
Hyper-V 在固件中启用虚拟化 没有开启,导致下载 英特尔HAXM 失败
解决方案:验证虚拟化支持,重装HAXM
,这里写太长了,Android中下载 HAXM 报错 Intel® HAXM installation failed,如何解决?,点击链接查看解决方案
通过上面,我们成功的解决了 Virtual Device
安装报错的问题,但好不容易要运行项目了,又开始报错了。
问题原因:这其实是因为无法下载gradle导致的,正确的做法是
解决方法:运行 flutter run -v 查看究竟下载的是哪个版本的gradle,或者看下方图一,android -> gradle -> wrapper -> gradle-wrapper.properties
,其中distributionUrl
就是下载地址及对应的版本号。
解决方案
这里强烈建议自己打开链接,去下载好,然后修改 distributionUrl 的引用路径
,我电脑是有代理的,但是不用这种方式仍然不行。
第一次运行需要等很久很久~~~~~~
官方推荐两个工具来开发Flutter:Android Studio 和 VSCode,我们选择哪一个呢?
VSCode是最近非常非常流行的开发工具,并且非常好用!而且VSCode最近已经有取代WebStorm作为前端首选开发工具的趋势了,我身为一个前端开发者,也很喜欢 VSCode 这种轻量的编辑器;
VSCode的优点
:
`VSCode的缺点:
使用VSCode开发Flutter我们需要安装两个插件:Flutter和Dart
对于进行过 Android 开发或者使用过 Webstorm、IDEA、PHPStorm等的小白,使用Android Studio肯定是没有任何问题的,比如我就是。
Android Studio的优点
:
Android Studio的缺点
:
使用Android Studio开发Flutter我们需要安装两个插件:Flutter和Dart