🎯🎯🎯一起来玩 Flutter —— 完整学习路线解读

12,780

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

前言

近期有不少网友加我微信(微信号:island-coder)咨询 Flutter 学习相关的问题,Flutter 作为一门新的技术,确实相关的资料书籍不太多。但就 Flutter 生态的影响力而言,已经是越来越强了。譬如,在 StackOverflow 网站上2021年度最受欢迎的技术中,Dart 语言排在了第7位。随着谷歌对 Flutter 跨平台解决方案的推进,估计会有越来越多的开发者使用 Flutter 构建他们的应用。

image.png

本篇,就学习 Flutter 来一次完整的梳理,也欢迎大家在评论区进行补充和交流

学习线路思维导图

先上一份思维导图,让大家有个整体认识。

学习路线图.png

Dart 语言

在学习 Dart 语言前,若没有任何编程基础,建议先了解一下计算机基础知识。Dart 作为一门现代化的面向对象编程语言,具备了市面上大多数编程语言的特点,具体来说会分为下面这些内容:

  • 变量定义、赋值:这是最基础的部分,至少要知道什么是变量,如何赋值。final,var 和 const 的区别。
  • 基本数学运算:加、减、乘、除、整除、取余等运算;
  • 条件分支:if...else if...else 控制程序逻辑走向,或是 switch 分支;
  • 循环:使用循环完成重复性的工作;
  • 容器类:如List、Map 和 Set 的应用;
  • 函数和参数:一个是使用函数编写可复用的逻辑处理代码,二是需要注意在 Dart 中函数也是对象。同时需要区分函数的命名参数、可选参数的使用;
  • 面向对象编程:了解面向对象编程的概念和思想,能够合理地使用类来封装代码提高复用性和降低耦合;
  • 继承、多态和抽象类:这是提高代码复用、降低代码耦合度十分重要的概念,建议是多看看一些源码和设计思想(如设计模式),然后在遇到复杂业务的时候先思考如何抽象和组织代码结构。
  • mixin:mixin 提供了一种更为灵活的代码复用方式,可以将功能组合到现有类中,从而避免了继承的一些缺点。
  • 泛型:使用泛型来做工具类是再好不过的选择了,通过泛型可以一套代码处理多种数据类型。
  • Future:有点类似前端的 promise,通过 Future 可以让异步编程变得更加简单。
  • null safety:空安全现在基本上是高级语言的标配了。通过空安全可以让团队遵循同一个规范,提高了代码的健壮性。

Flutter 组件

作为一个合格的App 开发,能够将一个UI 界面还原出来是基本的要求。建议一开始需要熟悉Flutter框架提供的自带组件,然后可以通过自带的组件组合成为自己的自定义组件。这部分内容包括:

  • 运行 Hello World 程序,跑通整个应用。
  • 了解应用程序的结构,知道如何设计你的代码目录结构。
  • 布局类组件:如 ContainerSizedBoxPaddingStackListViewGridView 等组件。
  • 业务类组件:如 TextField,按钮,文本,图片,图标等组件。
  • 自定义组件:利用布局类组件和业务类组件组合,构成自己的可复用的组件。
  • 自有组件库:根据产品特性和公司需要,抽取复用的组件构成自有的组件库,从而提升整个公司的开发效率。

表单

应用中,表单在界面中出现的频率很高。如何处理表单对开发效率的影响很大。建议可以一开始从简单的表单页面开始,例如登录页、注册页。然后再做一些复杂的表单页面,具体如下:

  • 简单表单页面的实现:登录页、注册页、绑定手机号这类的页面;
  • 不同表单的实现:例如普通文本、密码、数字、日期、单选、多选等表单的实现;
  • 表单校验:封装表单校验库,将通用的校验规则放置在校验库中,比如长度、手机号校验、密码强度校验、日期格式校验等等。通过前端的提前校验可以避免后端请求压力,也能够提升用户体验。
  • 表单封装:封装一套通用的表单组件,供整个团队复用,提高生产效率,也能减少 bug 的产生。

状态管理

状态管理是 Flutter 的核心,如何处理数据实体、业务逻辑、界面之间的关系对代码的可维护性十分关键,而这都依赖于状态管理的实现。对于状态管理,建议按如下方式学习:

  • 有状态组件和无状态组件的区别,可以阅读一下StatefulWidgetStatelessWidget 的源码,会有更深刻的理解。
  • 理解组件的渲染机制:虽然我们开发中很少关注组件如何渲染,但是当应用状态管理插件时,我们通过渲染机制能够知道状态数据更新时如何减少刷新的范围,实现局部刷新,从而提升性能。
  • 主流状态插件应用:对比主流状态插件,从中选择一个合适自己团队的应用。对于长期用的状态管理插件,建议深入了解具体的实现机制,以便再遇到问题时能够快速定位,快速解决。
  • 按需刷新:相比 setState 这种简单粗暴的全局更新,状态管理插件的一大优势就是可以实现局部刷新。通过按需刷新可以极大地提高页面的流畅度。

关于状态管理的内容,可以通过阅读下面两篇文章来进行了解:

网络请求

App 的业务功能开发,相当一部分工作是在与和后端对接口、联调接口。了解与后端的数据交互,封装好网络请求库非常重要。这里建议按如下的方式进行学习:

  • JSON 数据的认识:这个其实很简单,基本上一看就明白。但更重要的是和后端约定返回数据的格式,避免每个接口的格式都不同,那样很难做统一封装。
  • JSON 数据转对象:曾几何时,我是直接拿 JSON 对象(实际已经转成 Map 了)的 key 去取所需的值的。结果遭受了惨痛的教训,比如后端问题变成 null 了会导致闪退。而且每次都需要敲 key的名称,编码效率极低。而将 JSON 数据转为对象,一方面是对象可以在整个工程里复用,二是可以通过对象属性访问,编码有提示。同时,可以应用 null safety 属性直接知道哪个属性是否可能为空。
  • RESTful接口调试:早期的接口都是 GET 和 POST 请求,但是其实语义上并不明确。建议是统一和后端约定使用 RESTful 风格接口。
  • Mock 数据:后端接口没出来之前,使用 Mock 数据来完成业务逻辑的模拟非常重要。建议 Mock 的数据获取接口和后端的接口保持一致(统一实现相同的接口),这样在后端接口就绪后可以直接切换接口实现类就可以了。
  • 网络请求插件使用与封装:Flutter 目前最为流行的网络请求插件是 Dio,对应的封装版本有 Retrofit。建议不要上来一开始就有用封装好的版本。而是自己一个个调试,然后尝试自己封装,这样会更好地理解封装的过程。
  • HeadersCookie:App 和浏览器不同,浏览器会自己管理 Cookie。而 App 需要自己管理 Cookie。因此有必要了解如何设置请求头 Headers,以及如何获取后端的 Cookie 并回写到 Headers 里面。

响应式编程

当你对界面、状态管理、网络请求都掌握差不多到时候,使用 Flutter 开发基本的 App 就基本没问题了。这个时候需要考虑应用结构如何优化。对于 Dart 而言,提供了 Stream 和 StreamListener 这样的工具来通过流的方式驱动关联业务或界面更新,实现响应式编程。这里面典型的是 BLoC 模式 (BLoC 也可以用于状态管理)。了解一下 BLoC 的理念对设计整个应用程序框架十分有帮助。

动画

当你掌握上述的基本技能后,你看到别人 App 的酷炫动效时肯定心痒痒,想自己偶尔也能玩一下这类高大上的东西。这个时候就需要了解动画的实现了,Flutter 提供了很多动画构建方式,比如:

  • 基础动画组件:例如 AnimatedContainerAnimatedOpacity 等等,通过这些组件可以实现简单但有趣的动画。
  • 动画复用:使用 AnimatedBuilder 可以构建可复用的动效。
  • 动画曲线:Flutter 自带了很多动画曲线效果,如果不满足也可以实现自定义曲线。有了动画曲线,你就可以定义一些自己的动画过渡效果了。
  • 动画插件:pub上也提供了很多动画插件,例如 Lottie 就可以将 AE 的动画转换为 Flutter 动画。如何查找动画插件,这需要懂得搜索,比如搜索关键字 Animation,或者经常逛一些技术社区,会让你的视野开拓很多,也许,不经意间就能发现一个酷炫的插件。

绘图

当你的动画都能搞定的时候,你会发现产品和设计可能已经对你刮目想看了,这个时候他们提出的交互或者界面效果会提高(千万别觉得升级自己的技能是在给自己挖坑)。比如,可能会出一个奇怪的外形,然后需要你实现,这个时候就需要用到绘图了。绘图其实需要挺高的数学知识辅助的,你可能需要提前复习一下高等数学、线性代数知识😜😜😜 —— 所以大厂筛选学校和学历其实也有一定的道理的,这些筛选出来的人的基础知识一般都不会差。

  • ClipPath:自定义裁剪路径对于绘制有规律的形状来说可以轻松搞定,当然有些复杂的可能需要一些贝塞尔曲线知识。
  • CustomPaintCanvas:使用 CustomPaintCanvas 可以随心所欲地绘图,包括你想搞个小游戏也行。但是,这个也是很烧脑的一环,说到底,数学真的很重要!
  • 计算机图形学(CG):这算是绘图的理论支撑,有计算机图形学知识的支撑,会让你绘制自定义图形时候得心应手。

本地数据存储

随着网络的升级,本地数据存储可能不像之前那么重要。但是,不论是对用户体验还是减轻后端压力都是必不可少的。譬如,微信就把整个个人的聊天记录存储在了本地 —— 既节省了服务器的存储空间和加载请求量,还能够对外宣称是“保护个人隐私”。本地存储主要有三个方面:

  • 简单键值对的存储:可以存储一些配置信息、登录会话信息,避免反复从服务器读取。在 Flutter 通常是使用 SharedPreferences 实现。
  • 文件存储:比如应用内下载的文件管理,日志文件等,可以使用文件管理实现。通常会使用到 path_provider 插件实现。
  • 关系型数据库:移动端大部分都采用了 SQLite 数据库,SQLite 的数据库操作语法和 MySQL 这类的标准 SQL 基本一致,可以用于存储关系数据。在 Flutter 中也有不少封装好的插件,比如 sqflite。

页面导航

实际上页面导航在一开始就会用到,大部分情况下,自带的导航和路由管理都能够满足需求。对于路由可以按如下方式进阶:

  • 自带路由的掌握:比如匿名路由,命名路由,路由传参,路由拦截等;
  • 路由插件的应用:了解如 fluro、GetX 的路由管理的优缺点,选择使用自带的路由管理还是使用第三方插件。
  • 2.0路由:这个如果是在 Web端的话建议了解一下,App 端个人感觉有点重,学习成本相对较高。当然,因为刚出来没多久,估计以后也会有简单易用的插件帮助我们使用。

自有插件

如果你的公司业务条线比较多,也许此时已经成为公司大神的你会被邀请做基础设施建设,或者是你自己想为开源社区做做贡献,这个时候就需要构建自有插件或开源插件了。Flutter 提供了插件构建模板工程,你可以按步骤构建自有插件,然后供整个公司的各个业务条线使用,提高各个业务条线的生产力。

原生交互

原生交互分为三个部分:

  • Flutter为原生提供服务
  • Flutter 使用原生提供的接口
  • 原生页面与 Flutter 页面之间的跳转

这块对于混编的应用来说是必不可少的,此时你的知识体系需要升级了,你需要学习安卓的 kotlin 开发,iOS 的 Swift 开发(呃,本来想一站式搞定,结果又绕回来了)。当然,到这个阶段,相信这些已经难不倒你了!

应用发布

恭喜你!你的应用可以在各大应用市场上架了!记得我的第一个应用在 AppStore过审的时候别提多兴奋了(之前被拒了好几次😂😂😂)!如何进行应用打包这个搜索一下就能搞定了,但是如何应对AppStore 每年都变的审查规则也是一场斗智斗勇的过程。 而安卓,如果搞定碎片化的操作系统分布也是头疼的一件事情。建议提前在应用内做应用统计,以及异常上报,避免发布后在用户机器上出现奇怪的问题。

后续

技术永无止境,再往后,你可能会深入去做性能优化、应用架构设计。这些方面很大程度靠个人平时的积累,多输入新的知识,同时了解其他的应用框架和特性(不限于 Dart,比如 Java 的 Spring 框架,Web 端的 React、Vue)都会让你对当前的应用架构设计有新的认识。扩充视野和技术深度,也许你就是下一个 CTO 的人选💪🏻💪🏻💪🏻!!!

【掘金官方评论抽奖】各位 Flutter 开发同学,你们是因为什么选择了 Flutter?欢迎评论区交流哦!

我是岛上码农,微信公众号同名,这是Flutter 入门与实战的专栏文章,提供体系化的 Flutter 学习文章。对应源码请看这里:Flutter 入门与实战专栏源码。如有问题可以加本人微信交流,微信号:island-coder

👍🏻:觉得有收获请点个赞鼓励一下!

🌟:收藏文章,方便回看哦!

💬:评论交流,互相进步!