# 前言 现在，主流的移动开发平台是Android和iOS，每个平台上的开发技术不太一样，针对每个平台开发应用需要特定的人员，但这样一来开发效率低下，因而需要进行跨平台开发。跨平台技术从最开始的Hybrid混合开发技术，到React Native的桥接技术，一直在演进。 Hybrid开发主要依赖于WebView。但WebView是一个重量级的控件，很容易产生内存问题，而且复杂的UI在WebView上显示的性能不好。React Native技术抛开了WebView，利用JavaScript Core来做桥接，将JavaScript调用转为Native调用。React Native最终会生成对应的自定义原生控件。这种策略将框架本身和App开发者绑在系统的控件上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，这样使得跨平台特性大打折扣。 Flutter是最新的跨平台开发技术，可以横跨Android、iOS、MacOS、Windows、Linux等多个系统。Flutter采用了更为彻底的跨平台方案，即自己实现了一套UI框架，然后直接在GPU上渲染UI页面。 笔者最早接触的跨平台技术是Adobe Air技术，写一套Action Script代码可以运行在PC、Android及iOS三大平台上。目前，笔者与朋友开发视频会议产品，需要最大化地减少前端的开发及维护工作量，所以，我们先后考察过Cordova、React Native及Flutter等技术。我们觉得Flutter方案更加先进，效率更高，后来就尝试用Flutter开发了全球第一个开源的WebRTC插件（可在GitHub上搜索Flutter WebRTC）。 写作本书的目的是想传播Flutter知识（因为Flutter确实优秀），想为Flutter社区做点贡献的同时也为我们的产品打下坚实的技术基础。通过写作本书，笔者查阅了大量的资料，使得知识体系扩大了不少，收获良多。 ### 本书主要内容 第1章介绍Flutter的基本概念，并搭建第一个Flutter程序，来感受一下Flutter之美。 第2章介绍几个重要知识点，如入口程序、Material Design、Flutter主题、无状态组件和有状态组件、使用包资源、Http请求。 第3章简单介绍Dart语言。Dart语言是Flutter SDK指定的语言，我们很有必要补充一下它的基础知识，包括语法特性、基本语句、面向对象等。 第4章介绍常用组件。Flutter里有一个非常重要的核心理念：一切皆为组件，本章主要讲解开发中用得最频繁的组件，如容器组件、图片组件、文本组件、图标组件和表单组件等。 第5章介绍Material Design风格的组件，Material Design风格是一种非常有质感的设计风格，并提供一些默认的交互动画。本章将分类介绍这些组件。 第6章介绍Cupertino风格的组件，这是一类iOS风格的组件，如CupertinoTabBar、CupertinoPageScaffold、CupertinoTabScaffold、CupertinoTabView等。 第7章介绍页面布局的基础知识和技巧，如基础布局处理、宽高尺寸处理、列表及表格布局等，最后通过一个综合布局示例来演示如何编写复杂的页面。 第8章介绍如何处理手势，如轻击、拖动和缩放等。Flutter中提供GestureDetector进行手势检测，并为手势检测提供了相应的监听。 第9章介绍如何加载、处理、展示资源和图片，如添加资源和图片、自定义字体等。 第10章介绍路由及导航是如何处理的，包括页面的渲染以及数据传递。 第11章介绍组件装饰和视觉效果的处理，如Opacity（透明度处理）、DecoratedBox（装饰盒子）、RotatedBox（旋转盒子）、Clip（剪裁处理）和CustomPainter（自定义画板）。 第12章介绍动画效果的制作，包含两个动画组件的使用：用AnimatedOpacity实现渐变效果、用Hero实现页面切换动画。 第13章介绍Flutter插件开发的入门知识。Flutter插件可以和原生程序打交道，比如调用蓝牙、启用WIFI、打开手电筒，等等。 第14章介绍开发工具及使用技巧，介绍几款常用的IDE工具，从代码的编写、辅助功能、程序调试、性能分析等多方面讲解工具及使用技巧。 第15章介绍测试与发布应用，包括：测试应用、发布Android版和iOS版App。 第16章通过一个综合案例介绍如何使用Flutter实现即时通讯App的界面。 #### 阅读建议 本书是一本基础入门加实战的书籍，既有基础知识，又有丰富示例，包括详细的操作步骤，实操性强。由于Flutter大量使用组件，所以本书对组件的讲解很详细，包括基本概念、属性及代码示例。每个组件都配有小例子，力求精简，还提供了配套网站提供完整代码，复制完整代码就可以立即看到效果。这样会给读者信心，在轻松掌握基础知识的同时快速进入实战。 如果你正在使用类似React Native等跨平台的技术，那么学习Flutter相对轻松很多。使用Flutter构建应用时，需要Android和iOS知识，因为Flutter依赖移动操作系统提供众多功能和配置。Flutter是一种为移动设备构建用户界面的新方式，但它有一个插件机制可与Android和iOS进行数据及任务通信。本书有一章专门讲解Flutter的插件开发技术，可以作为进一步学习的起点。 Flutter引用了大量Web开发的知识，比如FlexBox布局方式、盒模型等，这些都引用了CSS的一些思想。所以从UI界面的实现角度来说，只需要熟悉Dart语言就能轻松上手Flutter。本书专门有一章介绍Dart语言的基础知识。 建议读者在一开始先把第1～3章基础理论通读一遍。到第4章时实际操作并运行每个例子，这样就能开发Flutter最简单的界面了。 第5章和第6章通读即可。第7章介绍的构建页面布局都是开发中常用的布局方法，建议读者仔细阅读、实际操作并运行每个例子。尤其是最后的布局综合例子，按步骤都走一遍，就能理解布局的思路。 第8～12章涵盖Flutter的高级用法，在开发中也经常使用。可以根据实际项目开发和学习的需要阅读。第13章介绍Flutter插件开发。这需要具备原生开发的知识，比如Java、Objective-C等相关知识。如果读者不需要开发插件可以略过。第14～16章实操性很强，读者只要根据书中的步骤仔细操作，就能快速掌握。 #### 关于随书代码 本书所列代码力求完整，但由于篇幅所限，代码没有全放在书里。完整代码在以下网址： <http://www.flutter100.net> <https://github.com/kangshaojun> #### 致谢 首先感谢机械工业出版社吴怡编辑的耐心指点，以及推动了本书的出版。 感谢朋友段伟伟工程师，江湖人称“鱼老大”，国内骨灰级WebRTC开发者、视频会议产品合作者。在这里感谢鱼老大的技术分享及帮助。 感谢陈波及陈志红两位好友。在本书交稿压力最大的时侯，从内容安排及语言润色方面，都提供了一些非常有用的建议。还感谢高文翠老师对本书大纲的指导。 最后还要感谢我的家人。感谢我的母亲及妻子，在我写作过程中承担了全部的家务并照顾小孩儿，使我可以全身心地投入写作工作。在写作那段时间，正好家里阁楼装修，感谢我的父亲，他亲自管理装修工程，帮我节省了很多时间和精力。我爱你们，和你们在一起是幸运的事情！ 亢少军 2018年12月7日