两个星期，用Flutter撸个APP
|
前言 Flutter是Google推出的跨平台的解决方案，Slogan是“Design beautiful apps”，国内也有知名企业在使用和推广，例如阿里、美团都有在尝试。 个人对其中的一些特性，比如JIT、Material Design、快速开发等很感兴趣，于是决定尝试一下。 于是诞生了诗词汇APP，首先看一下是个什么样的APP。
接下来我们一步步从不同方面说说Flutter的开发。 开始 FLutter可以在Windows、Linux、Mac上进行开发，开发工具可以使用VS Code、Android Studio、IDEA等，本文推荐使用Android Studio，主要在于Android Studio提供了FLutter Inspector工具，可以实时审查元素，解决界面的显示适配问题。 搭建开发环境 搭建环境的主要步骤：
配置编辑器 主要是给编辑器安装相应的插件。 VS Code安装flutter插件，Android Studio和IDEA需要安装Flutter和Darter插件。 其中Android Studio和IDEA基本一样，跟VS Code的主要区别在于：
可根据个人喜好、习惯选择使用。 推荐网站 在安装、配置过程中，可参考以下中文资料： Flutter中国 Flutter中文文档 主要技术点 Dart 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的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_recorder和flutter_qq两个插件，而这两个插件一个要求编译选项需要设置!use_framework，一个要求不能设置，造成了冲突，在实际编译中一直编译不通过。 结语 开发结束，最终打包了Release版本的APK，安装到手机后，发现惊喜。 竟然如丝般顺滑，这是我始料未及的，转场效果、页面相应速度不输原生APP。 总而言之，个人对Flutter的前景相当看好，毕竟是Google大厂出品，并且项目本身的迭代速度很快，目前已经是0.11版本，期望在不远的将来发布正式的1.0版本，更期望国内厂商加大对Flutter的支持力度。 （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号