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

港控/mmm° 2022-10-12 01:39 276阅读 0赞

## 前言 ##

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

## Flutter面试准备 ##

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

### 视频学习 ###

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

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

![5260e613b1c3818069327a585651855c.png][]

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

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

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

![5508d9f247e0e0976348097ee0ee780d.png][]

### 电子书学习 ###

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

![af3fe2e508f3a3bc8f9089df3e20b3b3.png][]

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

## 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道题目，更多面试题已整理成文档，会发出来共享文件的。

![5b2b9e548578b5f4d6225678a3565912.png][]

## Flutter项目 ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70_pic_center][]

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

## 结尾 ##

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

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

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

[5260e613b1c3818069327a585651855c.png]: /images/20221005/04809da1c99943d5af5c85796932d83c.png
[5508d9f247e0e0976348097ee0ee780d.png]: /images/20221005/0f49d35279bb4745a6e4ed0116fd811e.png
[af3fe2e508f3a3bc8f9089df3e20b3b3.png]: /images/20221005/2548c18eb1f24e1f8bb3756ceca8dafa.png
[5b2b9e548578b5f4d6225678a3565912.png]: /images/20221005/cd7061d4306d49dd80969b4a4a840924.png
[Flutter -]: https://jq.qq.com/?_wv=1027&k=R86wGPem
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81MjU0NjUyMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221005/0389f7288aea47df9ad0af76f8f96c39.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NnyQIKoZ