前言
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工具，可以实时审查元素，解决界面的显示适配问题。搭建开发环境
搭建环境的主要步骤：
下载SDK，下载地址。配置PATH，如果使用Mac或者Linux系统，一定要将bin目录新增到系统PATH。配置依赖源映象，这一步很重要，并且需要将指令码放到启动shell中。export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
执行flutter doctor，这一步耗时会很长，需要耐心等耐。安卓开发工具及外挂，配置编辑器。配置编辑器
主要是给编辑器安装相应的外挂。
VS Code安装flutter外挂，Android Studio和IDEA需要安装Flutter和Darter外挂。
其中Android Studio和IDEA基本一样，跟VS Code的主要区别在于：
VS Code提供了更好的程式码提示功能IDEA提供了Flutter Inspector，可实时审查页面元素可根据个人喜好、习惯选择使用。
推荐网站
在安装、配置过程中，可参考以下中文资料：
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的支援力度。
现组建了一个Android的大圈子，内有大神小白起飞，圈内会不定时更新一些Android中高阶的进阶资料，欢迎大家带着技术问题来讨论，共同成长进步！（包含资深UI工程师，Android底层开发工程师，Android架构师，原生效能优化及混合优化，flutter专精）；
欢迎点赞+私信我 资料 即可加入~
