Flutter 体验记

来自:夜远曦白

终于挤出点时间,来体验一把 Flutter,虽然貌似出了很久了,一直没玩过,看起来又很有意思,多学习点东西总是好的,实践才是最好的老师。

虽然网上的教学文章很多,还是需要自己照着流程走一把,做着属于自己的笔记,才更深刻。

1. 环境搭建

首先,当然就是 搭建环境,打开 Fuller 中文网,地址是:https://flutterchina.club/get-started/install/,我的是 Windows 系统~

一步步走,由于在国内访问 Flutter 有时可能会受到限制,所以按照流程来先配置下用户环境变量,临时镜像不能保证一直可用,参考  Using Flutter in China 获取最新动态。

2

看下系统要求,这一般都是满足的,Git for Windows 工具装起来也很简单,将安装地址配置在系统环境变量的 Path 中,弄好在命令框里面输入git 验证下是否安装好即可,输入 git --version 还可以看看版本。

3
4

接下来,下载 Flutter SDK
下载地址:https://flutter.dev/docs/development/tools/sdk/releases#windows
or  https://github.com/flutter/flutter/releases
那我就下载个最新的稳定的版本,这个名字看起来是修复了啥bug的,下载共 470.21M,啧啧啧~

5

然后解压,我是解压到了 D 盘,按照教程说的,找到 fultter_console.bat,双击运行。

6

打开后的 FLUTTER 字有点酷~ 然后输入 fullter doctor,得到如下结果。
(注意这里的 X ,开头没去管,后面就开始填坑)

7

输入个 flutter --version 看看版本,当然还可以输入flutter help 寻求点帮助,看看咋玩转 flutter:

8

作为 Android 开发,当然就是准备在 Android Studio 这个编辑器上写 Flutter,这个就是老早就安装好的,这…就不来一遍流程了。直接打开 AS (目前我电脑上的版本是 3.4),下载 Flutter 插件。

9

纳尼,什么情况?查网上原因,别人说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 顺带的更新重启一下。

10

重启后,Automatically check updates for Stable Channel 还没勾上,勾上 Apply 一下,再到 Plugins 的 Marketplace 中搜索 Flutter,出现了。Install 后 Restart(虽然也不知道是不是上面设置的原因,总之暂时解决了插件搜不到问题就是好的,感觉也可能是没更新的原因,哈哈)

11

2. 开始体验项目

一切准备完毕,终于要开始创建应用啦。打开 AS,File -> New Flutter Project。

12

Create New Flutter Project,这当然选择 Flutter Application。

13

随意取个 project 的名称,这里,第一个坑来了,Flutter SDK path,这里在开头明明就下载好了,解压在 D 盘的 flutter 文件夹下,可是总是检测失败。

14

原来开头没有配置 flutter 的环境变量,so,赶紧去配置好一下,如下图,于是上面选择好Flutter SDK path就成功了:

15

项目创建完毕,如图所示了,虽然没学过 dart 语言,先跑一下 。

16

大坑又来了,跑不起来,copy 下图框住的英文搜索,其实这里下面 wrong 的提示也可以发现,貌似是从 jcenter 上拉不下来一下 jar 包。

17

搜到的 Flutter 踩坑记也都说是这种原因,网络限制,拉取不到需要的 jar 包,于是,照着别人说的改呗,从 aliyun 拉取。

118

将 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

19

替换了也一直没跑起来,我这里还把 gradle 也升级到了目前最新的版本。

20

还是没跑起来!这里坑又来了,上面没理的 X 来报复了,再次打开 flutter_console.bat ,输入 flutter doctor,检测一下,果然,这里还有两个 X 没解决呢。

21

好吧,阅读英文,先解决第二个吧,说是 Android 许可证没被接受是吧,那就按照提示的说,运行 flutter doctor --android-licenses。

22

打印了一堆东西,打入各种 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,终于,都是绿绿的 √ 了,开森。

23

3. 运行项目

现在终于,总算填完坑了吧,运行项目。

24

Yes,跑起来了,然后改一行代码,main.dart 中,随便改几个文字,按闪电。

25

体验热重载(hot reload),无重启实时加载修改后的代码,并没丢失状态,好好好啊,这个感觉起来快得很,不错不错。

26

总结

回过头一看,体验过程写得真长,真的是一步步下来,记录过程。虽然有点坑在,总算完成了体验。接下来,如果不忙,就系统学习下 Flutter,看似还是很好玩的,项目建起来旁边还有 ios 目录,不知道是不是可以找个苹果手机直接运行,现在还没尝试,毕竟初步体验,留着下次再探究怎么玩。

Flutter中文网 学习 Flutter 也好方便,加油好好学,网站右上角还有本书的链接 《Flutter实战》,好好好,学学学。一步一个脚印。
Github 上还有不少不错的开源项目,自己找吧。

先记录一个:

https://github.com/CarGuo/GSYFlutterBook

Flutter完整开发实战详解系列,提供在线预览和pdf下载,本系列将完整讲述:如何快速从 0 开发一个完整的 Flutter APP,配套高完成度 Flutter 开源项目 GSYGithubAppFlutter ,同时会提供一些Flutter的开发细节技巧,之后深入源码和实战为你全面解析 Flutter

立个目标:将上述几个学完,理解+实践,应该就有还不错的水准了吧。加油!

推荐↓↓↓
安卓开发
上一篇:Jetpack 源码解析—LiveData的使用及工作原理 下一篇:Android 多 Fragment 切换优化