Flutter 学习资料汇总

Flutter 终于正式来啦，现在都到 1.2 版了，虽然现在仍然有很多坑，很多问题，在 android 中嵌入 Flutter 还是不够好，但是我们学习 Flutter 的却是时候了，不说你在公司 android 项目里有多少应用，Flutter 的学习总是有必要的，先了解，熟悉，在可以的时候直接上了，Flutter 的未来不用担心，你知道 Flutter 妥妥的就是未来就行了

这里我整理下找到的资料，放上些自己的理解，方便大家的学习，也方便自己查阅

Flutter 的原理很简单，创建一张画布，并在这张画布上渲染界面。同时，监听原生事件，在 Dart 层响应所有触摸事件。这和跨平台游戏引擎的原理是一致的。抽象出统一的界面、触摸、交互语言，然后使用一致的渲染引擎呈现最终产物

Flutter 是 Google 开源的新一代跨平台 UI 框架。不同于其他我们熟知的移动端跨平台方案，Flutter 更像游戏引擎，因为 Flutter 有自己的渲染引擎：我们在 Flutter 上写了界面后，Flutter 会在自己的 canvas 上渲染，移动端不负责绘制

---

非常有意思的一段话

很有意思的，Flutter 来了，大家喊打喊杀的，都喊学不动了，的确，新的东西总是要话时间去了解，学习，掌握，精通的。这需要时间精力，若是我们一直在处于学习新技术线的状态，那么肯定没时间巩固，完善现有知识体系，最终会落下样样会，样样不精的局面

但是大家想啊，新东西是能拉开距离的，也总是因为新东西的到来劝退一部分人，我们学习要学明白，很多东西，至少思路啊，设计什么的只有长时间才会产生变化，其他都一样。大家学到精髓，再看新东西，至少一半都是熟悉的，这样学习起来就简单狠多了，同时这也是客户端的宿命

好了，不废话了，下面是摘录的部分：

原文：学习Flutter从这里开始

大前端学不动了 ?

很多人看到Google的flutter框架的时候，第一反应就是：别出新东西了，实在学不动了。 但是作为大前端开发者就是这样，各种折腾：

客户端开发者：从Android到iOS，或者从iOS到Android，到RN，甚至现在越来越多的客户端开发者接触前端相关知识（Vue、React、Angular、小程序）

前端开发者：从jQuery到AngularJS，到三大框架并行：Vue、React、Angular，还有小程序，甚至现在也要接触客户端开发（比如RN、Flutter）

大前端开发就是，不像服务器一样可能几年甚至几十年还是那一套的东西，新技术会层出不穷。 但是每一样技术的出现都会让惊喜，因为他必然是解决了之前技术的某一个痛点的，所以我们要学会拥抱这种变化。

并且很多知识在学习的过程中，你会发现他们都是相同的，并不是说都要从头再来，最重要的是建立属于自己的知识体系。

---

官方网站：

• Flutter_中文社区
• Flutter_中文网
• Flutter_github
• pub_官方依赖库
• Flutter_icon库

学习网站：

• Flutter 发布会视频(有字幕哦)
• fidev.io
• flutter.codelabs

简友教程：

盖世英雄_64c4 | Q吹个大气球Q | iwakevin 走路不穿鞋oO | TYL_CQ | 闲鱼技术 | 谢栋_ | guaju 阿策神奇 | 开心人 | 乘香墨影 | 恋猫月亮 | Yuzo | 何小有 | 泽毛 | 刘望舒文章看最后链接 | 恋猫de小郭

---

Dart 部分

• 给Java开发者的Flutter开发基础---Dart语言
• Dart GC 内存回收机制介绍
• Flutter中的层级蛋糕

Flutter 特性了解

• Flutter - 特性

Flutter 环境配置、软件安装、首次运行

• Flutter - 配置，首次运行

视频教程

• Flutter基础视频教程

实战项目

1. Flutter 天气 app

   • Flutter实战（一）写一个天气查询的APP
   • Flutter实战（二） 写一个天气查询的APP
   • Flutter实战（三）检验Flutter的跨平台能力

2. 上拉下拉

   • Flutter 实现上拉加载更多、下拉刷新

3. 阿里 Flutter-go

   • 阿里 Flutter-go 项目拆解笔记（一）
   • 阿里 Flutter-go 项目拆解笔记（二）
   • 阿里 Flutter-go 项目拆解笔记（三）
   • 阿里 Flutter-go 项目拆解笔记（四）
   • 阿里 Flutter-go 项目拆解笔记（五）
   • 阿里 Flutter-go 项目拆解笔记（六）

4. Flutter豆瓣客户端

   • FlutterDouBan

5. Panda看书

   • flutter_books

6. Flutter 仿淘宝

   • 让一部分人先看见未来之Flutter淘宝App

---

Flutter 和 Android 相互集成

• Flutter 集成到 Android 项目三部曲
• Flutter Plugin

---

其他学习资源

• 帮你整理一份快速入门Flutter的秘籍
• 刚刚，阿里宣布开源Flutter应用框架Fish Redux！
• Flutter 视频播放

---

Flutter 开发思路

1. Flutter 嵌入 android 插件 Flutter 是 UI 层级的跨平台，对于很多功能来说，不同平台有各自不同的实现，Flutter 层就无能为力了，这时可以在比如 android 平台编写一个 Plugin 插件，然后 Flutter 依赖这个平台 native 实现的库，通过 MethodChannel 实现通信，具体请看：

   • Flutter Plugin 开发流程
   • Flutter混合开发——FlutterBoost

2. 优先加载渲染耗时的 Flutter 首帧 FlutterView的首帧渲染耗时较高，在Debug版本有明显感受，大概会黑屏2秒，release版本会好很多。但我们观察Cpu曲线，发现还是一个较为耗时的过程。有一种体验优化的思路是，我们可以预先让将要使用的 FlutterView 加载好首帧，这样，在真正使用的时候就很快了，可以先建立一个只有1个像素的窗口，在这个窗口里面完成FlutterView首帧渲染，代码如下：

   

3. Flutter 跨平台开发

• 一种flutter应用的跨平台适配解决方案

4. Flutter 开发游戏

Flutter 开发游戏的兼容库flame 插件都出来了，推荐大家多少去了解下：

• 开始用Flutter做游戏吧

---

Flutter 目前的问题

Flutter 目前对于我们来说还是太新了，至少缺乏全面的第三发库和服务支持就是个死穴，目前适合研究，上手，商业应用需谨慎

• 摘自： Flutter技术调研报告
• Dart 语言，作为一门全新的语言上手成本比较高，对于移动端开发人员，语言以及框架都是全新的，整个技术栈的积累也都得从头开始
• 编译后的包体积较大
• 欠缺第三方库，需要自己造轮子
• 默认只支持 arm-v7a CPU 架构，后期应该可以修改编译配置解决此问题
• 多个 Feature 同时请求时，可能有的收不到回调，这个可能是Dart的消息机制有关，需要进一步研究，非必现
• WebView的支持很弱
• 音视频的支持很弱
• API 类似 Android ,对 iOS 开发者上手可能不是非常友好
• 图片资源的多倍率适配问题，必须提供一倍图，会增大应用体积
• Fluter UI实现嵌套层次太多，可阅读程度不高（很低 ）
• 境外环境依赖（有国内镜像），新建项目 dart package get 不稳定
• Flutter 的设计图标准，比如像素值，和 Android 和 ios 的设计标准有区别
• 图片和文字混排，实现比较麻烦
• ListView 的视图复用机制，需要调研，感觉 View 多了会有点卡顿
• 网络图片的缓存机制，需要调研，目前Image所以支持网络图片，但是关于它的缓存，还不清楚

---

Flutter Weight UI 组件表

• StatelessWidget - 无状态组件
• StatefulWidget - 有状态组件
• Image - 图片
• Icon - 图标
• Text - 文字
• Container - 容器组件，内置Padding、宽高、背景、边框等细节操作
• Center - 居中显示Layout
• Column - 纵向排列Layout
• Row - 横向排列Layout
• Wrap - 横向排列Layout，自动换行
• CustomScrollView - 支持嵌套滚动子控件的滚动视图
• SliverToBoxAdapter - 包装普通控件，适配CustomScrollView
• ListView - 单一的List组件，不支持PullRefresh
• GideView - 网格组件
• Divider - 分割线组件

---