一、前言
闲来无事,花了两个多星期入了Flutter
的坑,这篇文章总结了一下这段时间学到的东西以及学习过程中看过的资料,也是想借此机会,看看自己有哪些遗漏的地方,感谢网上的各位大神。
之后也会根据总结好的知识体系,写一些自己的文章。
二、准备工作
2.1 Dart 语言
学习下来,Dart
语言很多地方和Java
都很类似,对于Android
程序员来说没有什么难度。我学习的时候主要关注的几点:
- 变量定义
- 函数定义(可选参数是最常用的点)。
- 类(构造函数定义的一些变种)
- 一些
Java
中没有遇到的操作符,例如?.
,expr1 ?? expr2
,b ??=1
。 List
,Map
等数据结构的定义方式。- 单例的实现方式。
mixin
的概念。Dart
语言中的语法糖
推荐文章
2.2 找一篇完整的教程
找到一篇完整的教程,从头到尾的跟着学习一遍,不要看独立的博客,有助于对整个Flutter
涉及的方面有一个整体的认识。
在学习完之后,再去针对有疑问的点去针对性地学习。我是跟着下面这篇教程学下来的,受益匪浅,感谢!
推荐文章
三、知识点拆解
经过了上面两步准备工作,就开始对知识点进行拆解,找一个笔记软件,按照拆解的分类,无论是别人写的,还是自己总结的,都要形成“知识组块”填入到脑海中,才不容易遗忘。
3.1 Widget
Widget
的学习为两个方面:
- 第一步:控件使用方式的学习,大家可以找一些在项目中做过的比较复杂的界面,试着用
Flutter
的方式写一遍,flutter-go 展示了经常会用到的控件,用到控件的时候去看它是怎么实现的。 - 第二步:除了会用之外,还要去了解一些
Widget
相关的概念,这里面比较核心的有:StatelessWidget
vsStatefullWidget
StatefullWidget
中State
的生命周期BoxConstraints
BuildContext
Widget
、Element
、RenderObject
三者的关系
推荐文章
- flutter-go
- Introducing Widget of the Week!,这个是
Flutter
官方的,简短地介绍了一些很有用的控件及其应用场景。 - [Flutter 学习] 页面布局之基础布局组件
3.2 资源处理 & 屏幕适配
- 如何声明并使用
Flutter APK
中的文件、图片、字体,以及图片放在不同文件夹下加载后所占的宽高。 - 屏幕适配。
参考资料
- Flutter 实战 中对应章节。
3.3 动画
动画的话简单的看 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
的使用- 手势的竞争和冲突
- 手势事件流的源码分析
推荐文章
3.6 异步操作
在Android
里面,异步操作的工具五花八门,AsyncTask
、HandlerThread
,但是在Flutter
里面,一个async/await
就解决问题了,主要掌握下面几点:
Flutter
的事件模型,isolate
的概念。Future
的概念。async/await
的使用方式,以及他们在事件循环中运行的时间点。isolate
之间如何通信。RxDart
的用法,这个和RxJava
很类似,如果之前学过的应该很容易能够掌握。
推荐文章
3.7 路由
掌握页面间跳转和传递参数的方式。
推荐文章
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 ,了解如何在项目中实现。
推荐文章
3.12 进阶
(1) 编译 & 打包原理
(2) 初始化流程
(3) 绘制框架分析
ad6623 - 掘金 写的下面这系列关于渲染流水线的文章很棒,我每篇都边看边画流程图跟着学了下来,虽然很痛苦,但是收货很大,感谢!
(4) 绘制框架的一些补充文章
- Flutter 实现原理及在马蜂窝的跨平台开发实践
- Joey的Flutter之旅 - (3) 布局构建、渲染、绘制机制浅析
- Flutter 视图的 Layout 与 Paint
- Flutter's Rendering Pipeline
(5) Dart
(6) 手势处理事件流
3.13 看一下实际的 App 是如何实现的
3.14 性能优化
刚入门,还没到性能优化的地步,还需继续努力。= =
3.15 打包 & 发布
四、小结
当然,这只是一篇入门的教程,离工程化的标准还很远,这种只能到项目中实践了。