Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

开篇词 | 为什么每一位大前端从业者都应该学习Flutter?

陈航 2019-07-01
00:00
08:50
讲述:陈航 大小:7.10M
你好,我是陈航,目前在美团外卖担任商家业务大前端团队技术负责人。在接下来三个月的时间里,我将和你一起学习 Flutter。
当下是移动互联网的时代,也是大前端技术紧密整合的时代。而移动系统与终端设备的碎片化,让我们一直头痛于在不同平台上开发和维护同一个产品的成本问题:使用原生方式来开发 App,不仅要求分别针对 iOS 和 Android 平台,使用不同的语言实现同样的产品功能,还要对不同的终端设备和不同的操作系统进行功能适配,并承担由此带来的测试维护升级工作。
这对中小型团队而言无疑是非常大的负担,也无形中拖慢了追求“小步快跑”,以快速应对市场变化的互联网产品交付节奏。
为解决这一问题,各类打着“一套代码,多端运行”口号的跨平台开发方案,如雨后春笋般涌现,React Native 就是其中的典型代表
React Native 希望开发者能够在性能、展示、交互能力和迭代交付效率之间做到平衡。它在 Web 容器方案的基础上,优化了加载、解析和渲染这三大过程,以相对简单的方式支持了构建移动端页面必要的 Web 标准,保证了便捷的前端开发体验;并且在保留基本渲染能力的基础上,用原生自带的 UI 组件实现代替了核心的渲染引擎,从而保证了良好的渲染性能。
但是,由于 React Native 的技术方案所限,使用原生控件承载界面渲染,在牺牲了部分 Web 标准灵活性的同时,固然解决了不少性能问题,但也引入了新的问题:除开通过 JavaScript 虚拟机进行原生接口的调用,而带来的通信低效不谈,由于框架本身不负责渲染,而是由原生代理,因此我们还需要面对大量平台相关的逻辑。
而随着系统版本和 API 的变化,我们还需要处理不同平台的原生控件渲染能力上的差异,修复各类怪异的 Bug,甚至还需要在原生系统上打各类补丁。
这都使 React Native 的跨平台特性被大打折扣:要用好 React Native,除了掌握这个框架外,开发者还必须同时熟悉 iOS 和 Android 系统。这,无疑给开发者提出了更多挑战,也是很多开发者们对 React Native 又爱又恨的原因。在这其中,也有一些团队决定放弃 React Native 回归原生开发,Airbnb 就是一个例子。
备注:2018 年,Airbnb 团队在 Medium 上发布的一系列文章(React Native at AirbnbReact Native at Airbnb: The TechnologyBuilding a Cross-Platform Mobile TeamSunsetting React NativeWhat’s Next for Mobile at Airbnb)详细描述了这个过程。
而我们本次课程的主角 Flutter,则完全不同于 React Native。
它开辟了全新的思路,提供了一整套从底层渲染逻辑到上层开发语言的完整解决方案:视图渲染完全闭环在其框架内部,不依赖于底层操作系统提供的任何组件,从根本上保证了视图渲染在 Android 和 iOS 上的高度一致性;Flutter 的开发语言 Dart,是 Google 专门为(大)前端开发量身打造的专属语言,借助于先进的工具链和编译器,成为了少数同时支持 JIT 和 AOT 的语言之一,开发期调试效率高,发布期运行速度快、执行性能好,在代码执行效率上可以媲美原生 App。而这与 React Native 所用的只能解释执行的 JavaScript,又拉开了性能差距。
正是因为这些革命性的特点,Flutter 在正式版发布半年多的时间里,在 GitHub 上的 Star 就已经超过了 68,000,与已经发布 4 年多的、拥有 78,000 Star 的同行业领头羊 React Native 的差距非常小。同时,阿里闲鱼、今日头条等知名商用案例的加持,更使得 Flutter 的热度不断攀升。
现在看来,在 Google 的强力带动下,Flutter 极有可能成为跨平台开发领域的终极解决方案。在过去的大半年时间里,我曾面试了 20 多位初、中、高级候选人,包括前端、Android、iOS 的开发者。当问到最近想学习什么新技术时,超过 80% 的候选人告诉我,他会学习或正在学习 Flutter。
不过坦白讲,相比其他跨平台技术,Flutter 的学习成本相对较高。我听过很多(大)前端开发者反馈:Flutter 从语言到开发框架都是全新的,技术栈的积累也要从头开始,学不动了。
学习成本高,这也是目前大多数开发者犹豫是否要跟进这个框架的最重要原因。对此,我感同身受。
但其实,大前端各个方向的工作有很多相似、相通之处。面对业务侧日益增多的需求,作为大前端团队的负责人,我曾在不同时期带领团队分别探索并大规模落地了以 React Native 和 Flutter 为代表的跨平台方案,也是美团最早落地 Flutter 线上大规模应用的发起者和推动者之一。
在探索并大规模落地 Flutter 的过程中,我阅读过大量关于 Flutter 的教程和技术博客,但我发现很多文章的学习门槛都比较高,而且过于重视应用层 API 各个参数的介绍或实现细节,导致很多从其他平台转来的开发者无从下手,只能依葫芦画瓢,却不知道为什么要“画瓢”,无法与自身的经验串联进而形成知识体系。这,无疑又增加了学习门槛,加长了学习周期。
那么,Flutter 到底该怎么学?真的要从头开始么?
虽然 Flutter 是全新的跨平台技术,但其背后的框架原理和底层设计思想,无论是底层渲染机制与事件处理方式,还是组件化解耦思路,亦或是工程化整体方法等,与原生 Android/iOS 开发并没有本质区别,甚至还从 React Native 那里吸收了不少优秀的设计理念。就连 Flutter 所采用的 Dart 语言,关于信息表达和处理的方式,也有诸多其他优秀编程语言的影子。
因此,从本质上看,Flutter 并没有开创新的概念。这也就意味着,如果我们在学习 Flutter 时,能够深入进去搞懂它的原理、设计思路和通用理念,并与过往的开发经验相结合,建立起属于自己的知识体系抽象层次,而不是仅停留在应用层 API 的使用上,就摆脱了经验与平台的强绑定。
这样的话,即使未来老框架不断更新,或者出现新的解决方案,我们仍旧可以立于不败之地。
那么,Flutter 框架底层有哪些关键技术?它们是如何高效运转,以支撑起可以媲美原生应用的跨平台方案的?Flutter 应用开发的最佳实践是怎样的?企业需要什么样的终端技术人才?终端技术未来有哪些发展方向?
这些问题,正是我要通过这个课程为你解答的。在这个课程里,我不仅会帮助你快速上手,能够使用 Flutter 开发一款企业级 App,更希望帮助你将其与过往的开发经验串联起来,以建立起自己的知识体系;同时,希望你能透过现象明白 Flutter 框架的用法,并看到其背后的原理和设计理念。
为了帮助你领悟到 Flutter 的核心思想和关键技术,而不是陷入组件的 API 细节难以自拔,我会在不影响学习、理解的情况下,省去一些不影响核心功能的代码和参数讲解,着重为你剖析框架的核心知识点和背后原理,并与你分享一些常见问题的解决思路。
整体来说,专栏主要包括以下五大部分内容:
Flutter 开发起步模块。我会从跨平台方案发展历史出发,与你介绍 Flutter 的诞生背景、基本原理,并带你体验一下 Flutter 代码是如何在原生系统上运行的。
Dart 基础模块。我会从 Dart 与其他编程语言的设计思想对比出发,与你讲述 Dart 设计的关键思路以及独有特性,并通过一个综合案例带你去实践一下。
Flutter 基础模块。我将通过 Flutter 与原生系统对应概念对比,与你讲述 Flutter 独有的概念和框架设计思路。学完这个模块,你就可以开发出一个简单的 App 了。
Flutter 进阶模块。我会与你讲述 Flutter 开发中的一些疑难问题、高级特性及其背后原理,帮助你在遇到问题时化被动为主动。
Flutter 综合应用模块。我将和你聊聊在企业级应用迭代的生命周期中,如何从效率和质量这两个维度出发,构建自己的 Flutter 开发体系。
最后,我希望通过这个课程,能够帮助你快速上手 Flutter 开发应用,掌握其精髓,并引导你建立起属于自己的终端知识体系。
现在,Flutter 正处于快速发展中,社区也非常活跃。站在未来看未来,尽管 Flutter 全平台制霸的目标已经非常清晰,但为期三个月的专栏分享未必能穷尽 Flutter 未来可能的技术发展方向。接下来,我会持续关注 Flutter 包括移动端之外的最新变化,持续更新这个专栏,第一时间与你分享 Flutter 的那些事儿。
好了,今天的内容就到这里了。如果可以的话,还请你在留言区中做个自我介绍,和我聊聊你目前的工作、学习情况,以及你在学习或者使用 Flutter 时遇到的问题,这样我们可以彼此了解,也方便我在后面针对性地给你讲解。
加油,让我们突破自己的瓶颈,保持学习、保持冷静、保持成长。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(77)

  • 加温后的啤酒
    老师你好,我之前接触过flutter,但是放弃了。因为接触了flutter之后发现,渲染UI方面确实性能、简洁性各方面都不错、可是像webView、音视频播放、第三方分享、数据持久化存储等功能需要大量的组件支持,flutter引擎并不支持。因此就需要去编写大量的组件、但是编写组件很麻烦、等于要写三套代码:iOS代码、安卓代码、Dart代码,那如果这么麻烦的话flutter存在的意义又是什么呢?这就是我放弃的原因。所以老师能讨论下这个问题该怎么解决吗?

    作者回复: 跟其他的跨平台解决方案相比,Flutter在Android和iOS代码复用率上是最高的了。不过Flutter毕竟只接管了渲染层,原生操作系统底层的能力像Push、视频、地图肯定还得依靠原生来实现,Flutter如果全接管了它就是一个操作系统了,那它打包的App得多大。
    有第三方成熟的插件尽量用第三方插件,特殊的需求可以自己封装

    2019-07-02
    2
    23
  • 胡鹏
    我是工作两年的后端,半年前内部调岗到大数据,,不过我的全栈梦想和架构梦想一直没变过,

    作者回复: 加油!

    2019-07-01
    8
  • top_founder
    我对dart能否成为大众开发语言持怀疑态度。我更认为typescript是未来前端的主流开发语言。

    作者回复: 如果你了解Dart就会发现其实Dart和TS很多概念都相似,比如Future与Promise,aync/await,Event Loop,Micro-Task和Macro-Task,Isolate与Worker

    2019-07-02
    4
  • Xunqf
    我是做iOS开发的,Flutter是我接触的第一个跨平台开发框架,自学一段时间后,遇到了如下一些问题:
    1.网页加载问题。
    2.视频播放问题。
    3.原生和Flutter之间跳转问题。
    4.图片编辑问题。
    5.Platform View目前还是beta版,也有各种问题。
    6.网络请求代理的问题。
    7.等等吧。
    希望在这个专栏中能够得到解答。

    作者回复: 大部分都会讲的

    2019-07-01
    4
  • Eren
    我是工作两年的Android程序员,赶上了Android移动端的末班车,希望通过学习Flutter可以弯道超车,实现自己的小梦想!加油!小伙伴们!

    作者回复: 加油

    2019-07-06
    3
  • Norbert
    我是一个7年老前端了,打算从flutter入手切入客户端开发

    作者回复: 加油

    2019-07-01
    1
    3
  • Geek_b3928a
    我是一位后端开发者,请问没有前端经验开始学习flutter是否吃力,能独立开发一个应用周期会有多久?

    作者回复: 没有前端/客户端基础直接学习Flutter还是有一些挑战的,建议先花半个月左右的时间学习一门前端框架,对视图、组件、生命周期、状态等一些前端/客户端基本概念之后再来学习效果会比较好。

    2019-07-01
    3
  • L
    后端程序员适合学习吗

    作者回复: 如果你对前端有一些基本概念(比如视图、组件、生命周期、状态),可以学习

    2019-07-01
    3
  • Carlo
    我们在生产环境使用flutter。发现适配新的native feature(比如dark mode 等)很成问题。您对这个有什么建议?

    作者回复: 跨平台技术本质上是为了抹平多端差异,尽量用统一而底层的技术栈去屏蔽操作系统的提供的不同能力,在不同操作系统实现一致的体验。
    如果你们有很强的适配native的新feature,说明你们需要在应用层去感知操作系统,精细的去控制实现细节,而这与跨平台技术本身的应用场景是矛盾的。
    不过就Dark mode这个需求而言,你们可以在Flutter上用主题搞定。

    2019-07-18
    2
  • 墨名次
    我做过几年Android/IOS应用程序开发,也使用Weex写过公司项目,不过这些东西快一年没接触了,现在一直在写后端(Java、.Net)跟Web前端,Flutter没发布正式版的时候自己也根据文档学过一些皮毛,就是学了基础控件然后做了一些商城首页、列表、详情示例,后来因为工作原因暂时把它放下了。现在,总有放不下Flutter的那种感觉,感觉它会火,它是前端跨平台的一个趋势,所以又冒出了继续学习Flutter的想法,前几天自己也通过写博客分享了Flutter环境安装在Java11下遇到一些问题的解决方法。现在真的很忙,每天半夜才能睡觉,不想自己去翻文档、看博客学习了,这样太累,想利用睡觉前刷头条的时间学习一下Flutter,技多不压身,所以希望能够通过老师分享的这个课程系统的深入的学习Flutter,快速入门Flutter。

    作者回复: 加油

    2019-07-02
    2
  • *
    老师好,我从实习到现在接触前端两年,最近准备学习flutter!目前接触的移动端解决方案是h5页面嵌在原生壳里面,这样做开发过程中和原生会有很多交互,不方便开发!
    1、需要android和iOS各自打包壳
    2、iOS上架审核慢问题
    3、第三方视频sdk集成问题,需要写两套,前端再调用原生方法打开视频
    4、实时位置定位等问题
    希望这些问题可以得到老师的解答!

    学习flutter image.network 加载网络图片失败了,还没找到原因

    作者回复: 加油

    2019-07-02
    2
  • Dominic
    评论区好多后端 学 flutter的 … …我也是,

    作者回复: 加油

    2019-07-02
    2
  • 水木年华
    前端开发一枚,熟悉webpack、react。老师有这些js基础学习Flutter会容易一些吗?

    作者回复: 可以的

    2019-07-02
    2
  • 衣知世 与 计知白
    安卓开发4年多,感觉很多东西还是不会,毕竟单单一个安卓就有很多方向,IM,视频,直播等等,如果现在学习Flutter,这些底层的原理是不是还得继续学习,Flutter只是一个UI渲染库呢?比如视频播放什么的还得用到安卓里面的video呢?

    作者回复: 安卓底层的东西也需要继续学的哈,在保持安卓的深度同时扩大终端技术的广度。flutter只负责渲染层,底层基础能力仍然需要操作系统提供支持的。技术领域没有银弹,每个技术有自己擅长的场景。

    2019-10-12
    1
  • Callin
    老师好,我是前端工程师, 做过小程序 学习过node ,想往大前端的方向发展,目标是全栈工程师,希望和老师一起共进,学习好Flutter

    作者回复: 加油

    2019-09-12
    1
  • Larry
    3年前端小工,持续并专注于移动端开发,熟悉RN,iOS开发,Android方向能力还差些;尝试过Taro、uniapp等国内跨平台框架。掌握移动端开发的知识体系,能够对新框架融会贯通,看清背后。期待flutter的到来。

    作者回复: 加油

    2019-08-06
    1
  • 忘山
    老师你好,我是一个大龄 iOSer,公司想跨平台开发控制智能系统设备,我感觉除了界面,还有一些交互可以使用 flutter,减少工作量,提高工作效率,但是具体底层的交互控制协议,音视频播放,推送好像目前的 flutter 或者说起他的跨平台开发都无法满足具体的需要,请问我可以这样理解么?

    作者回复: 是的。毕竟Flutter只接管了渲染层,底层能力还是要走操作系统的。这类场景也不复杂,双端实现了后Dart层用插件即可。

    2019-07-20
    1
  • Geek_29b9d4
    什么时候用原生开发,什么时候用flutter

    作者回复: 原生适用于需要精细化控制操作系统底层能力的时候。大部分纯渲染交互的场景用Flutter就可以了

    2019-07-12
    1
  • 靠人品去赢
    大佬问一下,为什么我觉得只要我flex用的好,其实像移动端前端都差不多,于是有几个问题
    (1)你即使用flutter也会有不同系统会有差异的问题,那我为什么要用flutter?他和市面上的这些前端框架有什么差别和优势,很多框架也支持多平台,而且学习曲线再高,也不过是JS+HTML+CSS的基础上DOM上搞事情。
    (2)还有这个flutter社区会真的流行开来吗,社区活跃度你觉得怎么样比如说跟一些比较流行的比?

    作者回复: 1.下篇文章会分析web容器方案、RN和Flutter这类的方案优缺点。Flutter直接把渲染和运行环境都接管了,所以它的方案在性能和体验上能够做的更精细,渲染层的差异Flutter肯定是最小的(即使和原生比)。
    2.大前端是趋势,多端技术栈融合统一也是趋势,目前看Flutter在这个趋势上是走的最远的。

    2019-07-02
    1
  • 勇闯天涯
    Flutter仅仅只是解决跨平台的问题吗?感觉在一些工具类项目(内部办公类似钉钉)中使用场景并不多,反而美团外卖中有很多Web页面很有必要这么做。

    作者回复: 打通原生开发Android/iOS技术栈,让大家能够用同样的语言和思想去专注于实际业务开发,而无需过多操心平台细节。跨平台本质上和现在后端经常提的Serveless概念解决的痛点是类似的

    2019-07-02
    1
收起评论
77
49
返回
顶部