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

前言

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

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

学习线路思维导图

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

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 程序，跑通整个应用。
• 了解应用程序的结构，知道如何设计你的代码目录结构。
• 布局类组件：如 Container，SizedBox，Padding，Stack，ListView，GridView 等组件。
• 业务类组件：如 TextField，按钮，文本，图片，图标等组件。
• 自定义组件：利用布局类组件和业务类组件组合，构成自己的可复用的组件。
• 自有组件库：根据产品特性和公司需要，抽取复用的组件构成自有的组件库，从而提升整个公司的开发效率。

表单

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

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

状态管理

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

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

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

• 🚩🚩🚩建议收藏！！Flutter状态管理插件哪家强？请看岛上码农的排行榜！
• Flutter 入门与实战（九十二）：状态管理系列大汇总

网络请求

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

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

响应式编程

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

动画

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

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

绘图

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

• ClipPath：自定义裁剪路径对于绘制有规律的形状来说可以轻松搞定，当然有些复杂的可能需要一些贝塞尔曲线知识。
• CustomPaint和 Canvas：使用 CustomPaint 和 Canvas 可以随心所欲地绘图，包括你想搞个小游戏也行。但是，这个也是很烧脑的一环，说到底，数学真的很重要！
• 计算机图形学（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。

👍🏻：觉得有收获请点个赞鼓励一下！

🌟：收藏文章，方便回看哦！

💬：评论交流，互相进步！