前端工作2年，因Flutter拿到了阿里咸鱼offer，背后的努力值得我们学习

Posted 2021-07-25 李不要熬夜

前言

在出现Flutter 起，有不少互联网大厂投入实践，先是有闲鱼团队大规模引入 Flutter，后有飞猪、百度贴吧、今日头条、西瓜视频、美团外卖、京东商城等团队在多个场景下落地了 Flutter 项目。而我一个大学室友看准了风口，工作两年了，决定转战Flutter，目标阿里咸鱼，这对于他来说是个挑战，在Flutter这方面知识还是有所欠缺，就疫情那会为准备面试在家学习Flutter，学的脑袋嗡嗡的，好在最后拿到了阿里咸鱼offer。

Flutter面试准备

简单看一个框架知识点肯定是不行，就了解了Flutter是什么，怎么用，优缺点等，当然了解是对的，要是去面试还得深入点。在系统学习Flutter这块，室友是看视频和电子书学习，详细是详细，就是有点费脑子。

视频学习

视频教学分为理论知识、进入实战、进阶提升三部分。

理论知识
这部分讲到认识视图、布局与列表、状态管理、路由与导航、线程与异步UI、Dart基础快速入门、表单输入与富文本、Flutter入门基础知识、项目结构、资源、依赖和本地化、什么是声明式UI视频、Flutter调试技巧、学习构建Flutter等内容，综合来说，理论知识这部分主要是讲开发工具选择与开发环境搭建指南、上手Flutter、Flutter理论知识了解，并单个视频都有相应文字版的文档讲解，更方便学习和理解。

进入实战
这部分是讲到了APP导航框架与常用功能实现，比如APP首页框架搭建-Scaffold与PageView、APP首页框架搭建-项目实践、轮播图Banner功能开发 、自定义AppBar实现滚动渐变等内容，这个视频内容还是得反复看，才能消化。

进阶提升
这部分内容视频可以说是重中之重，重头戏吧，涉及到网络编程与数据存储技术相关经验和技巧、玩转列表组件、Flutter，Native混合开发、App首页功能开发、搜索模块开发、开发包和插件开发、智能AI语音搜索模块实现、打包发布Flutter应用等内容，真不亏是进阶，慢慢啃下来把。

小编光和小伙伴们说的内容就有这么多，但远远还不止哦，既然要学习就不要停留在表面。

电子书学习

室友整理些有关Flutter的电子书，包括了Flutter官方文档详细翻译、Flutter技术进阶、Flutter跨平台开发全套电子书、Flutter基础学习PDF、Flutter技术入坑指南总结（阿里闲鱼）等，可以先从Flutter技术入坑指南总结看起，比较好接受，再看Flutter官方文档详细翻译时，就会比较好懂不会觉得乏味了。

个人学习心得：不管是看视频还是电子书学习，一定要做笔记，把重要的、不会不懂的点等记录下来，做的笔记梳理成自己的脑图或文档，这个过程也是加深对知识点的印象和理解。

Flutter面试

面试时有关Flutter问的面试题不多，好在面试前端做了准备能回答的上来，还是要了解下ios或者android的原生相关知识，小编把被问到的及小编整理的面试题及答案列举一部分，看看关于Flutter都会问什么。

1.Flutter 是什么
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

Flutter 特性有哪些?
快速开发（毫秒级热重载）

• 绚丽UI（内建漂亮的质感设计Material Design和Cupertino Widget和丰富平滑的动画效果和平台感知）
• 响应式(Reactive，用强大而灵活的API解决2D、动画、手势、效果等难题)
• 原生访问功能
• 堪比原生性能

3. Flutter 和 Dart的关系是什么？
Flutter是一个使用Dart语言开发的跨平台移动UI框架，通过自建绘制引擎，能高性能、高保真地进行移动开发。Dart囊括了多数编程语言的优点，它更符合Flutter构建界面的方式。

4. Dart 语言的特性？

• Productive（生产力高，Dart的语法清晰明了，工具简单但功能强大）
• Fast（执行速度快，Dart提供提前优化编译，以在移动设备和Web上获得可预测的高性能和快速启动。）
• Portable（易于移植，Dart可编译成ARM和X86代码，这样Dart移动应用程序可以在iOS、Android和其他地方运行）
• Approachable（容易上手，充分吸收了高级语言特性，如果你已经知道C++，C语言，或者Java，你可以在短短几天内用Dart来开发）
• Reactive（响应式编程）

5. Dart的一些重要概念？

• 在Dart中，一切都是对象，所有的对象都是继承自Object
• Dart是强类型语言，但可以用var或 dynamic来声明一个变量，Dart会自动推断其数据类型,dynamic类似c#
• 没有赋初值的变量都会有默认值null
• Dart支持顶层方法，如main方法，可以在方法内部创建方法
• Dart支持顶层变量，也支持类变量或对象变量
• Dart没有public protected private等关键字，如果某个变量以下划线（_）开头，代表这个变量在库中是私有的

6. dart是值传递还是引用传递？
引用传递

7.Widget 和 element 和 RenderObject 之间的关系？

• Widget是用户界面的一部分,并且是不可变的。
• Element是在树中特定位置Widget的实例。
• RenderObject是渲染树中的一个对象，它的层次结构是渲染库的核心。

8. mixin extends implement 之间的关系?
继承（关键字 extends）、混入 mixins （关键字 with）、接口实现（关键字 implements）。这三者可以同时存在，前后顺序是extends -> mixins -> implements。
Flutter中的继承是单继承，子类重写超类的方法要用@Override，子类调用超类的方法要用super。
在Flutter中，Mixins是一种在多个类层次结构中复用类代码的方法。mixins的对象是类，mixins绝不是继承，也不是接口，而是一种全新的特性，可以mixins多个类，mixins的使用需要满足一定条件。

9. 使用mixins的条件是什么？
因为mixins使用的条件，随着Dart版本一直在变，这里讲的是Dart2.1中使用mixins的条件：
mixins类只能继承自object
mixins类不能有构造函数
一个类可以mixins多个mixins类
可以mixins多个类，不破坏Flutter的单继承

10.Flutter main future mirotask 的执行顺序?
普通代码都是同步执行的，结束后会开始检查microtask中是否有任务，若有则执行，执行完继续检查microtask，直到microtask列队为空。最后会去执行event队列（future）。

11.Future和Isolate有什么区别？
uture是异步编程，调用本身立即返回，并在稍后的某个时候执行完成时再获得返回结果。在普通代码中可以使用await 等待一个异步调用结束。
isolate是并发编程，Dartm有并发时的共享状态，所有Dart代码都在isolate中运行，包括最初的main()。每个isolate都有它自己的堆内存，意味着其中所有内存数据，包括全局数据，都仅对该isolate可见，它们之间的通信只能通过传递消息的机制完成，消息则通过端口(port)收发。isolate只是一个概念，具体取决于如何实现，比如在Dart VM中一个isolate可能会是一个线程，在Web中可能会是一个Web Worker。

12.Stream 与 Future是什么关系？
Stream 和 Future 是 Dart 异步处理的核心 API。Future 表示稍后获得的一个数据，所有异步的操作的返回值都用 Future 来表示。但是 Future 只能表示一次异步获得的数据。而 Stream 表示多次异步获得的数据。比如界面上的按钮可能会被用户点击多次，所以按钮上的点击事件（onClick）就是一个 Stream 。简单地说，Future将返回一个值，而Stream将返回多次值。Dart 中统一使用 Stream 处理异步事件流。Stream 和一般的集合类似，都是一组数据，只不过一个是异步推送，一个是同步拉取。

篇幅原因，为不影响小小伙伴阅读感受，只列举了12道题目，更多面试题已整理成文档，会发出来共享文件的。

Flutter项目

这版块就得看小伙伴个人是否需要了，可能安卓小伙伴有会需要，前端小伙伴也可以看看，我把Flutter项目都编辑成了一个文档，直接点击标题就可获取文档噢，先看看都有什么项目吧。

• 项目一：Flutter - 实现支付宝、微信支付
• 项目二：京东技术的Flutter实践之路
• 项目三：Flutter实现一个酷炫带动画的列表型多选日历组件
• 项目四：Flutter 仿滴滴出行App
• 项目五：阿里闲鱼 Flutter 架构演进和实践
• 项目六：Flutter的原理及美团的实践

项目小编就没有具体展开来讲了，都详细写在文档中，有哪里没有看懂的，建议搭配Flutter学习那个版块内容看看哈哈哈。

结尾

不管是出自对Flutter感兴趣还是对移动端感兴趣去学，Flutter是值得每个前端学习的，学习之前建议先巩固前端的基础知识，尤其是浏览器原理。

现阶段越来越多前端开发可能会有 App 相关的业务，这是大前端的趋势，而Flutter 是更接近 App 的开发框架，它的性能和跨平台效果上满足了项目的需求，小伙伴你们觉得呢？欢迎评论区讨论噢。

注：文章中小编学习Flutter的视频学习/电子书学习/Flutter面试题/项目文档等资料共享给小伙伴们，直接点击这里就可以喔。