Flutter - 学习总览

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

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

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

---

官方网站：

• Flutter_中文社区
• Flutter_中文网
• Flutter_github

学习网站：

• fidev.io
• flutter.codelabs

简友教程：

盖世英雄_64c4 | Q吹个大气球Q | iwakevin
走路不穿鞋oO | TYL_CQ | 闲鱼技术 | 谢栋_ | guaju
阿策神奇 | 开心人 | 乘香墨影 | 恋猫月亮 | Yuzo

---

Dart 教程

• 给Java开发者的Flutter开发基础---Dart语言

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

---

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应用的跨平台适配解决方案

---

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 - 分割线组件

---