Flutter项目实战之Flutter_Gank

今年接触到了Flutter,看了官网的介绍,感觉还是很有吸引力的,原生性能,兼容iOS和Android并且作为Fuchsia默认的开发框架,热加载(hotReload)极大的提供了开发效率,丰富的UI控件(包括Material和Cupertino两种风格),但唯一可惜的是正式版还未发布,不过flutter的活跃度还是很高的,相信很快正式版就会到来。为了体验一把Flutter,就做了一个小Demo。

传送门:flutter_gank

先附上几张截图


flutter_gank_4.png
flutter_gank_1.png

没有设计,自己怎么想怎么弄的,调用了干活集中营的api,这个号称客户端最多的网站,由于已经过了两个多月才来写这篇博客,由于flutter的更新,现在最新的是6.0dev版本,可能会影响部分功能的使用,但应该不会有很大的改动,我就开发的过程谈谈,flutter的一些优缺点。

如果有面向对象的编程经验,入门还是很简单的,并且,官网也很细心的为我们讲解了一些概念,因为我是做android的我看得比较多的是这一篇flutter-for-android,还有针对于iOS devsReact Native devsXamarin.Forms devs,可以看出google的野心不小,不过我认为Flutter会降低移动端的开发成本,Flutter UI相比android原生更细腻一些,还原度会更高一些,毕竟做过android开发就知道碎片化的问题有多麻烦。

step by step

环境安装

文档:https://flutter.io/get-started/install/,按照步骤一步步基本就没什么问题了,但需要注意的是有一行小字Note: If you’re in China, please read this wiki article first. 我自己安装过程还是挺顺利的,这里不做过多描述。

Flutter Gallery编译

由于目前资料比较少,Flutter Gallery在Flutter工程目录下,可以说是比较齐全的资料,虽然有文档,哪有一个Demo来的爽,直接看效果,事半功倍。我在这个过程还是花费了一番功夫,整个过程不是很顺利,只是因为Flutter版本不匹配,这里我就说一个较快的方法

  • 下载Flutter 这里下载最新版本https://flutter.io/sdk-archive
  • 解压Flutter到你的电脑,xxxx\flutter_windows_v0.x.x-dev\flutter\bin 配置到环境变量,这样就可以在任何地方使用flutter命令了
  • 找到xx\flutter_windows_v0.x.x-dev\flutter\examples\flutter_gallery,这里包含了Flutter Gallery的源代码
  • 直接运行 flutter build apk 命令,在xx\build\app\outputs\apk\release目录下可以找到编译好的apk
  • 发送到android手机或者模拟器就可以看到运行好的Demo
    整个过程在命令行完成的,当前编译版本截图:


    image.png

    因为同一目录下的Flutter Gallery版本是匹配的,所以比较顺利,我最开始是从github上直接下载master的源码,所以遇到了很多问题。

Flutter Gallery apk下载: https://fir.im/ts78

开发工具

官网上提供了两种编辑器的插件Android Studio 和VS Code,这里我还是选择比较熟悉的Android Studio,安装插件的方式也很简单,https://flutter.io/get-started/editor/,和安装一般的插件是一样的,安装完成后重启,就能找打,新建flutter 工程的选项

image.png

工程新建完成后,一个基础的工程就出来了,第一次新建工程有点慢,一次就成功了,直接运行到模拟器就ok了。

开发阶段

新建完成的Flutter工程包含了一些目录,其中比较显眼的就是android 和ios目录,但实际上我没在这两个目录下写代码(以后肯定会写),其实只要看了一些Demo大致就晓得,几乎所有的代码都在lib下面,依赖管理通过 pubspec.yaml,我并不想讲太多关于代码的事情,因为我在前面编译好了一个Demo(Flutter Gallery)我写代码的时候基本上是照葫芦画瓢,文档和Demo都有,那就慢慢研究吧,没有捷径可走。

Flutter的优点

在开头的时候我介绍了一些,但都是比较官方的,下面是结合自己的开发体验

  • 编译很快,hotReload果然名不虚传
  • 扩展性很强,一切皆widget,可以轻松实现一些复杂的效果
  • 动画很赞,Hero动画可以很轻松的实现过度动画,其他动画api也非常灵活可配置
  • 换主题很赞,可快速全局切换主题
  • 调试模式很赞,Flutter Gallery就可以进行性能分析,slow motion(慢动作)等等,

Flutter的缺点

Flutter还处于Beta版本,肯定是有些原因的

  • 开源库太少,尽管https://pub.dartlang.org/已经提供了大量的插件,但相对于其他语言来说,远远不够,资料还是太少了
  • 一些控件在debug模式和release模式下表现有些细微的差异
  • json解析太麻烦,因为习惯了使用GsonFormat之类的插件,不过这应该不是太大的问题,有时间,也可以尝试着写一个
  • gif循环播放造成的oom问题,我查阅了issue,好像是skia图像引擎的问题,其实加载大量图片也容易出现oom,没有出现像Picasso和Glide之类的图像框架

以上仅仅是在开发的过程中碰到的

Flutter_Gank 项目介绍

终于说了一点和标题相关的了,不然有人要说我标题党了,其实做完之后感觉也没什么特色,就列一些用到了哪些知识点吧

开过过程中还遇到了一些小坑,比如,

  • 侧滑抽屉Drawer可以通过 _globalKey.currentState.openDrawer()打开却没有提供Close,或者Hide之类的方法关闭,需要通过Navigator.pop(context)来隐藏菜单 。
  • 做双击退出的时候调用Navigator.pop(context)会出现黑屏,需要调用SystemNavigator.pop()才能完全退出。

传送门:flutter_gank

更多学习资料

如果觉得我的文章对你有帮助,留下一点痕迹呗,star一下就是对我最好的鼓励
如需转载,请自便,留下署名和原文链接即可

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,471评论 25 707
  • 《活法》中,稻盛和夫先生说:“人生的意义是什么?人生的目的在哪里?我的答案是:提升心性,磨练灵魂。”磨练灵魂,需要...
    繁花坞阅读 1,740评论 16 19
  • 说明:规范的目的是提高效率,所使用的规范应该是适应当前团队的。 项目工程结构 代码结构 实现文件中的代码结构,提倡...
    DH_Fantasy阅读 1,703评论 0 2
  • 学习体会: 1.根据卢因的研究,任何事物都处在一对相反作用力之下,且处于平衡状态。 其中推动事物发生变革的力量是:...
    扶摇zj阅读 627评论 0 3