终于挤出点时间,来体验一把 Flutter,虽然貌似出了很久了,一直没玩过,看起来又很有意思,多学习点东西总是好的,实践才是最好的老师。
虽然网上的教学文章很多,还是需要自己照着流程走一把,做着属于自己的笔记,才更深刻。
1. 环境搭建
- 首先,当然就是 搭建环境,打开 Fuller 中文网,地址是:https://flutterchina.club/,我的是 Windows 系统~
- 一步步走,由于在国内访问 Flutter 有时可能会受到限制,所以按照流程来先配置下用户环境变量,临时镜像不能保证一直可用,参考 Using Flutter in China 获取最新动态。
- 看下系统要求,这一般都是满足的,Git for Windows 工具装起来也很简单,将安装地址配置在系统环境变量的 Path 中,弄好在命令框里面输入git 验证下是否安装好即可,输入 git --version 还可以看看版本。
- 接下来,下载 Flutter SDK
下载地址:https://flutter.dev/docs/development/tools/sdk/releases#windows
or https://github.com/flutter/flutter/releases
那我就下载个最新的稳定的版本,这个名字看起来是修复了啥bug的,下载共 470.21M,啧啧啧~
- 然后解压,我是解压到了 D 盘,按照教程说的,找到 fultter_console.bat,双击运行。
- 打开后的 FLUTTER 字有点酷~ 然后输入 fullter doctor,得到如下结果。
(注意这里的 X ,开头没去管,后面就开始填坑)
- 输入个 flutter --version 看看版本,当然还可以输入flutter help 寻求点帮助,看看咋玩转 flutter:
- 作为 Android 开发,当然就是准备在 Android Studio 这个编辑器上写 Flutter,这个就是老早就安装好的,这...就不来一遍流程了。直接打开 AS (目前我电脑上的版本是 3.4),下载 Flutter 插件。
纳尼,什么情况?查网上原因,别人说IDEA的模块系统加载不出来,是由于IDEA的网络安全机制造成的,类似于windows的防火墙,IDEA误认为你的网络不安全,不给你连接,本质为公司的网络被IDEA认为不安全,具体IDEA为什么会这么认为,不知道。
解答:点击 File -> Settings -> Appearance&Behavior -> System Settings -> Updates 将 Use secure connection 选项的 √ 去掉! 可是我发现我这里本来就是去掉的,只不过没勾上 Automatically check updates for Stable Channel ,于是勾上点击 Check Now,出现更新,点击 Update and Restart 顺带的更新重启一下。
- 重启后,Automatically check updates for Stable Channel 还没勾上,勾上 Apply 一下,再到 Plugins 的 Marketplace 中搜索 Flutter,出现了。Install 后 Restart(虽然也不知道是不是上面设置的原因,总之暂时解决了插件搜不到问题就是好的,感觉也可能是没更新的原因,哈哈)
2. 开始体验项目
- 一切准备完毕,终于要开始创建应用啦。打开 AS,File -> New Flutter Project。
- Create New Flutter Project,这当然选择 Flutter Application。
- 随意取个 project 的名称,这里,第一个坑来了,Flutter SDK path,这里在开头明明就下载好了,解压在 D 盘的 flutter 文件夹下,可是总是检测失败。
- 原来开头没有配置 flutter 的环境变量,so,赶紧去配置好一下,如下图,于是上面选择好Flutter SDK path就成功了:
- 项目创建完毕,如图所示了,虽然没学过 dart 语言,先跑一下 。
- 大坑又来了,跑不起来,copy 下图框住的英文搜索,其实这里下面 wrong 的提示也可以发现,貌似是从 jcenter 上拉不下来一下 jar 包。
- 搜到的 Flutter 踩坑记也都说是这种原因,网络限制,拉取不到需要的 jar 包,于是,照着别人说的改呗,从 aliyun 拉取。
- 将 google()、jcenter(),都替换一下。
maven{ url 'https://maven.aliyun.com/repository/google' }
maven{ url 'https://maven.aliyun.com/repository/jcenter' }
maven{ url 'http://maven.aliyun.com/nexus/content/groups/public'}
- 别忘记了 flutter_tools\gradle 同样替换,我这的地址是 D:\flutter\flutter\packages\flutter_tools\gradle
- 替换了也一直没跑起来,我这里还把 gradle 也升级到了目前最新的版本。
- 还是没跑起来!这里坑又来了,上面没理的 X 来报复了,再次打开 flutter_console.bat ,输入 flutter doctor,检测一下,果然,这里还有两个 X 没解决呢。
- 好吧,阅读英文,先解决第二个吧,说是 Android 许可证没被接受是吧,那就按照提示的说,运行 flutter doctor --android-licenses。
- 打印了一堆东西,打入各种 y 允许一下,so,这个问题搞定了。接下来嘛,就是第一个问题了,说 Flutter 需要 Android SDK 版本为 28,而且 Android BuildTools 为 28.0.3,我这里是 28.0.1,让我自行去检查升级下,其实这里提示说我这 SDK 在 C 盘,让我去那检查,也不知道这是不是缓存的,实际上我的 AS 配置的 SDK 在 D:\sdk 下,那里也存在 28.0.3,它为啥没检测到,不管了,从 D:\sdk 里面将需要的版本拷贝一下,粘贴到这里说的目录下,继续输入 flutter doctor,终于,都是绿绿的 √ 了,开森。
3. 运行项目
- 现在终于,总算填完坑了吧,运行项目。
- Yes,跑起来了,然后改一行代码,main.dart 中,随便改几个文字,按闪电。
- 体验热重载(hot reload),无重启实时加载修改后的代码,并没丢失状态,好好好啊,这个感觉起来快得很,不错不错。
总结
回过头一看,体验过程写得真长,真的是一步步下来,记录过程。虽然有点坑在,总算完成了体验。接下来,如果不忙,就系统学习下 Flutter,看似还是很好玩的,项目建起来旁边还有 ios 目录,不知道是不是可以找个苹果手机直接运行,现在还没尝试,毕竟初步体验,留着下次再探究怎么玩。
Flutter中文网 学习 Flutter 也好方便,加油好好学,网站右上角还有本书的链接 《Flutter实战》,好好好,学学学。一步一个脚印。
Github 上还有不少不错的开源项目,自己找吧。
先记录一个:
GSYGithubAppFlutter:Flutter完整开发实战详解系列,提供在线预览和pdf下载,本系列将完整讲述:如何快速从 0 开发一个完整的 Flutter APP,配套高完成度 Flutter 开源项目 GSYGithubAppFlutter ,同时会提供一些Flutter的开发细节技巧,之后深入源码和实战为你全面解析 Flutter
立个目标:将上述几个学完,理解+实践,应该就有还不错的水准了吧。加油!