Flutter 体验记

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

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

1. 环境搭建

1
  • 一步步走,由于在国内访问 Flutter 有时可能会受到限制,所以按照流程来先配置下用户环境变量,临时镜像不能保证一直可用,参考 Using Flutter in China 获取最新动态。
2
  • 看下系统要求,这一般都是满足的,Git for Windows 工具装起来也很简单,将安装地址配置在系统环境变量的 Path 中,弄好在命令框里面输入git 验证下是否安装好即可,输入 git --version 还可以看看版本。
3
4
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 拉取。
18
  • 将 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 上还有不少不错的开源项目,自己找吧。

先记录一个:

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容