一、前言

闲来无事，花了两个多星期入了Flutter的坑，这篇文章总结了一下这段时间学到的东西以及学习过程中看过的资料，也是想借此机会，看看自己有哪些遗漏的地方，感谢网上的各位大神。

之后也会根据总结好的知识体系，写一些自己的文章。

二、准备工作

2.1 Dart 语言

学习下来，Dart语言很多地方和Java都很类似，对于Android程序员来说没有什么难度。我学习的时候主要关注的几点：

• 变量定义
• 函数定义（可选参数是最常用的点）。
• 类（构造函数定义的一些变种）
• 一些Java中没有遇到的操作符，例如?.，expr1 ?? expr2，b ??=1。
• List，Map等数据结构的定义方式。
• 单例的实现方式。
• mixin的概念。
• Dart语言中的语法糖

推荐文章

• Dart 教程
• 高效编写 Dart -- 使用指南

2.2 找一篇完整的教程

找到一篇完整的教程，从头到尾的跟着学习一遍，不要看独立的博客，有助于对整个Flutter涉及的方面有一个整体的认识。

在学习完之后，再去针对有疑问的点去针对性地学习。我是跟着下面这篇教程学下来的，受益匪浅，感谢！

推荐文章

• Flutter 实战（作者 wendux）

三、知识点拆解

经过了上面两步准备工作，就开始对知识点进行拆解，找一个笔记软件，按照拆解的分类，无论是别人写的，还是自己总结的，都要形成“知识组块”填入到脑海中，才不容易遗忘。

3.1 Widget

Widget的学习为两个方面：

• 第一步：控件使用方式的学习，大家可以找一些在项目中做过的比较复杂的界面，试着用 Flutter的方式写一遍，flutter-go 展示了经常会用到的控件，用到控件的时候去看它是怎么实现的。
• 第二步：除了会用之外，还要去了解一些Widget相关的概念，这里面比较核心的有：
  • StatelessWidget vs StatefullWidget
  • StatefullWidget中State的生命周期
  • BoxConstraints
  • BuildContext
  • Widget、Element、RenderObject三者的关系

推荐文章

• flutter-go
• Introducing Widget of the Week!，这个是Flutter官方的，简短地介绍了一些很有用的控件及其应用场景。
• [Flutter 学习] 页面布局之基础布局组件

3.2 资源处理 & 屏幕适配

• 如何声明并使用Flutter APK中的文件、图片、字体，以及图片放在不同文件夹下加载后所占的宽高。
• 屏幕适配。

参考资料

• Flutter 实战 中对应章节。

3.3 动画

动画的话简单的看 Flutter 实战 中这部分的代码就行了，主要了解动画组成，掌握：

• 单个、组合动画。
• 页面跳转动画。
• 共享元素动画。

推荐文章

• Flutter 实战之动画

3.4 自定义组件

自定义组件有以下三种方式：

• 组合现有的Widget：这种方式比较简单，组合即可，用于封装项目中一些通用的布局。
• 自定义Widget：通过CustomPaint和CustomPainter，类似于在Android当中重写View.draw(Canvas canvas)，使用Canvas和Paint的API在画布上绘制，当项目中一些图形比较复杂的时候会用到它。
• 自定义布局：自定义RenderBox和MultiChildRenderObjectWidget的子类，用于子Widget的排列规则比较复杂的情况，例如Flow/Wrap这样的流式布局。

推荐文章

• Flutter自定义绘制（1）- 绘制基础
• Flutter 34: 图解自定义 View 之 Canvas (一)
• Flutter 35: 图解自定义 View 之 Canvas (二)
• Flutter 36: 图解自定义 View 之 Canvas (三)
• CustomPaint 与 Canvas
• 实例：圆形渐变进度条(自绘)
• Flutter 完整开发实战详解（十六、详解自定义布局实战）

3.5 手势处理

• Listener：难点在于HitTestBehavior的场景。
• IgnorePointer和AbsorbPointer：忽略PointEvent。
• GestureDector的回调方法。
• GestureRecognizer的使用
• 手势的竞争和冲突
• 手势事件流的源码分析

推荐文章

• Flutter 中的事件流和手势简析
• Flutter 完整开发实战详解(十三、全面深入触摸和滑动原理)

3.6 异步操作

在Android里面，异步操作的工具五花八门，AsyncTask、HandlerThread，但是在Flutter里面，一个async/await就解决问题了，主要掌握下面几点：

• Flutter的事件模型，isolate的概念。
• Future的概念。
• async/await的使用方式，以及他们在事件循环中运行的时间点。
• isolate之间如何通信。
• RxDart的用法，这个和RxJava很类似，如果之前学过的应该很容易能够掌握。

推荐文章

• flutter 实战 5：异步 async、await 和 Future 的使用技巧
• 深入理解 Flutter 多线程

3.7 路由

掌握页面间跳转和传递参数的方式。

推荐文章

Flutter 实战之路由管理

3.8 数据操作

数据操作分为以下几类，都有开源的包可以使用，查看说明文档即可。

• SharePreference，shared_preferences
• 文件，path_provider
• 数据库，sqflite
• 网络请求，dio
• 在网络请求的时候，还会遇到将JSON转换成实体类的问题， json_serializable。

3.9 Flutter 与 Native 的通信

• Flutter和Native之间如何进行数据和方法的传递。
• 如何在Flutter中嵌入Android View。

参考文章

• Flutter Platform channel 详解
• Flutter 实例 - 从本地到 Flutter 通信 - Event Channels
• 深入理解 Flutter Platform Channel

3.10 状态管理

mclzone 写的一系列关于状态管理的文章很棒！看完之后就明白了，没有再看过其它的文章。

推荐文章

• Flutter | 状态管理探索篇 —— Scoped Model （一）
• Flutter | 状态管理探索篇 —— Redux （二）
• Flutter | 状态管理探索篇 —— BLoC (三)
• Flutter | 状态管理拓展篇 —— RxDart (四)
• Flutter | 状态管理指南篇 —— Provider

3.11 国际化

国际化的掌握分为三步：

• 跟着 实用的 Flutter 国际化指南 中的标准方式做一遍。
• 用 flutter_i18n 实现一遍，会发现其实现原理同上，只是将转换部分的逻辑自动生成了。
• 看一下 flutter_gank ，了解如何在项目中实现。

推荐文章

• 实用的 Flutter 国际化指南
• 国际化
• intl

3.12 进阶

(1) 编译 & 打包原理

• Flutter 原理及美团实践
• 深入理解 Flutter 的编译原理与优化

(2) 初始化流程

• 深入分析 Flutter 初始化流程
• 关于 Flutter 初始化流程，我必须告诉你的是...

(3) 绘制框架分析

ad6623 - 掘金 写的下面这系列关于渲染流水线的文章很棒，我每篇都边看边画流程图跟着学了下来，虽然很痛苦，但是收货很大，感谢！

• Flutter 框架分析

(4) 绘制框架的一些补充文章

• Flutter 实现原理及在马蜂窝的跨平台开发实践
• Joey的Flutter之旅 - (3) 布局构建、渲染、绘制机制浅析
• Flutter 视图的 Layout 与 Paint
• Flutter's Rendering Pipeline

(5) Dart

• Dart 的内存回收机制介绍

(6) 手势处理事件流

• Flutter 中的事件流和手势简析
• Flutter 完整开发实战详解(十三、全面深入触摸和滑动原理)

3.13 看一下实际的 App 是如何实现的

• flutter_gank
• GSYGithubAppFlutter

3.14 性能优化

刚入门，还没到性能优化的地步，还需继续努力。= =

3.15 打包 & 发布

四、小结

当然，这只是一篇入门的教程，离工程化的标准还很远，这种只能到项目中实践了。

作者：泽毛
链接：https://juejin.im/post/5d2341b3f265da1b71531966
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。