写点什么

当中国诗词大会邂逅了 Flutter,从此我的眼里只有你!(1)

用户头像
Android架构
关注
发布于: 8 小时前

Flutter 项目的开发语言是 Dart,Dart 是由 Google 开发的一种面向对象语言,可以编译成 ARM 和 x86 代码直接运行在 iOS、Android 设备上。


推荐先学习 Dart 语言[官方教程](


),对 Dart 有初步了解之后再进行 Flutter 的学习和开发。

[](

)界面开发


终于可以进入 Flutter 本身了。

[](

)Widget


Flutter 中页面所有元素都是 Widget,又分为 StatelessWidget 和 StatefulWidget。


顾名思义,StatelessWidget 就是指无可变状态的 Widget,这类 Widget 的状态只由创建 Widget 时传入的参数决定,一旦创建,其状态、在页面上的展示效果也就不再改变。


而 StatefulWidget 内部则存在着可变状态。当通过 setState 改变这些状态时,Flutter 会重新渲染该 Widget。

[](

)布局


在实际开发中,主要使用了 Row、Column、Container、Expanded、Stack 等。


Row、Column 提供了水平、垂直方向的布局,Stack 提供了堆叠方式的布局,各种容器有不同的特性,可根据实际页面需求选择搭配不同的布局。


推荐学习?[官方文档](


)?及?[国内维护的中文翻译](


)。

[](

)主要插件


话题切回到诗词汇 APP,本 APP 收集了 4000 余位诗人的 30 多万首诗词,提供了古诗词的查询、收藏、朗诵功能,并且实现了初步的社区功能。


项目目录结构如下:



开发这个 APP 大概用了一个月的业余时间,每天抽出一两个小时,这样折算为工作日,大概是两个星期左右,开发效率还是很高的。


下面跟大家分享一下主要功能及所使用的一些插件。

[](

)切换主题


为了实现实时切换主题颜色,使用了状态管理插件。


[flutter_redux](


)?。

[](

)极光推送


在国内厂商中,极光是少有的对 Flutter 提供了技术支持的,这里给极光大大的??。


[jpush_flutter](


)

[](

)QQ


QQ 的 Flutter 插件提供了基本的登录、分享功能。


[flutter_qq](


)

[](

)微信


微信的 Flutter 插件提供的功能稍微丰富,包含了支付、登录、分享、启动小程序的功能。


[fluwx](


)

[](

)事件总线 Event Bus


大名鼎鼎的 event_bus 也提供了对 Flutter 的支持。


[event_bus](


)

[](

)音频


录音及播放音频也有很好的支持。


[audio_recorder](


)


[audioplayer2](


)

[](

)其它


其它诸如加载 HTML、Toast 提示、图片选择器、图片加载等也有较好的插件支持。


可在?[官方插件库](


)?查询相关的插件。

[](

)坑

[](

)安装、升级


FLutter 的安装、升级会经常遇到卡死的问题,主要原因就是使用了 Google 的源,但是莫名的,即使使用了上网、设置了国内镜像后,也会遇到同样的问题。只能通过反复的flutter doctor?或?flutter upgrade直到解决问题。

[](

)开发


由于笔者最近一段时间 Android 项目做得较多,习惯了 Android 的 XML 布局方式,对于在代码中编写页面的形式一开始还有些不习惯,但是在按照官方例子实践了几个页面后,用代码写页面的优势就体现出来了。


在页面已经设计好的情况下,开发的时候脑海中就构思出一个 Widget 树,从根节点到每一个节点一级一级嵌套下去,自然而然的布局就写好了。

[](

)Dialog 弹出框


使用 Dialog 的时候,弹出 Dialog 的 Context 及 Dialog 本身都会压入栈中,所以让 Dialog 消失的方法是Navigator.of(ctx).pop(),这样的设计既不同于 Android 也不同于 iOS,也许跟 Flutter 本身所有元素都是 Widget 的设计有关。

[](

)编译


在编译 Android 版本的时候很顺畅,没有遇到任何问题。但是在编译 iOS 版本的时候,遇到了很多问题,直到现在也没有解决。


问题在于使用了`audio_recorde


《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开:qq.cn.hn/FTe 免费领取
复制代码


rflutter_qq两个插件,而这两个插件一个要求编译选项需要设置!use_framework`,一个要求不能设置,造成了冲突,在实际编译中一直编译不通过。

[](

)结语


开发结束,最终打包了 Release 版本的 APK,安装到手机后,发现惊喜。


竟然如丝般顺滑,这是我始料未及的,转场效果、页面相应速度不输原生 APP。


总而言之,个人对 Flutter 的前景相当看好,毕竟是 Google 大厂出品,并且项目本身的迭代速度很快,目前已经是 0.11 版本,期望在不远的将来发布正式的 1.0 版本,更期望国内厂商加大对 Flutter 的支持力度。


**顺便推广一下笔者的诗词汇 APP,欢迎大家?[下载试用](


)?,或者访问?[诗词汇](


)?体验下 Flutter 如丝般的顺滑。_**

用户头像

Android架构

关注

还未添加个人签名 2021.10.31 加入

还未添加个人简介

评论

发布
暂无评论
当中国诗词大会邂逅了Flutter,从此我的眼里只有你!(1)