Flutter初识

Flutter简介

Flutter 由 Google 的工程师团队打造，用于创建高性能、跨平台的移动应用。Flutter 针对当下以及未来的移动设备进行优化，专注于 Android and iOS 低延迟的输入和高帧率。

Flutter 可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用；给用户提供漂亮、快速、jitter-free 的 app 体验。

官网：https://flutter.dev

Flutter中文网：https://flutterchina.club

跨平台自绘引擎

Flutter使用自己的高性能渲染引擎来绘制widget。这样不仅可以保证在Android和iOS上UI的一致性，而且也可以避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API，目前Google Chrome浏览器和Android均采用Skia作为其绘图引擎。

Flutter 2.0 现已支持iOS、Android、Fuchsia（Google新的自研操作系统）、Web（Flutter for web）和PC开发。

Flutter框架结构

Flutter官方提供的Flutter框架图：

1-1.41c572c4.png

Flutter Framework

这是一个纯 Dart实现的 SDK，它实现了一套基础库，自底向上，我们来简单介绍一下：

底下两层（Foundation和Animation、Painting、Gestures）在Google的一些视频中被合并为一个dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制能力。
Rendering层，这一层是一个抽象的布局层，它依赖于dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，然后更新UI树，最终将UI树绘制到屏幕上，这个过程类似于React中的虚拟DOM。Rendering层可以说是Flutter UI框架最核心的部分，它除了确定每个UI元素的位置、大小之外还要进行坐标变换、绘制(调用底层dart:ui)。
Widgets层是Flutter提供的的一套基础组件库，在基础组件库之上，Flutter还提供了 Material 和Cupertino两种视觉风格的组件库。而我们Flutter开发的大多数场景，只是和这两层打交道。

Flutter Engine

这是一个纯 C++实现的 SDK，其中包括了 Skia引擎、Dart运行时、文字排版引擎等。在代码调用 dart:ui库时，调用最终会走到Engine层，然后实现真正的绘制逻辑。

开源资源：

flutter：官方开源框架
awesome-flutter：关于Flutter库、工具、教程、文章等一系列很棒的资源列表。也可以访问https://flutterawesome.com，查找需要的组件。
Gallery：官方的demo应用
flutter-go：阿里巴巴开源的，flutter 开发者帮助 APP，包含 flutter 常用 140+ 组件的demo 演示与中文文档
DoraemonKit：简称 "DoKit" 。一款功能齐全的客户端（ iOS 、Android、微信小程序、Flutter ）研发助手，你值得拥有。https://www.dokit.cn/
FlutterExampleApps：一些基础入口的Flutter例子
flutter/plugins：官方提供的一些插件
MMKV：MMKV 是基于 mmap 内存映射的 key-value 组件，底层序列化/反序列化使用 protobuf 实现，性能高，稳定性强。从 2015 年中至今在微信上使用，其性能和稳定性经过了时间的验证。（现已支持Flutter）
gsy_github_app_flutter：Flutter 超完整的开源项目，功能丰富，适合学习和日常使用
dio：dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...
flutter_wanandroid：基于Google Flutter的WanAndroid客户端，支持Android和iOS。包括BLoC、RxDart 、国际化、主题色、启动页、引导页，拥有较好的项目结构&比较规范的代码！
flutter_deer：Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图，更贴近真实项目的练习。
Best-Flutter-UI-Templates：最佳UI模板实践
HistoryOfEverything：时间线demo
flukit：futter中文社区出品的flutter UIKit
flutter-ui-nice：UI实践
flutter_easyrefresh：EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件。
fl_chart：强大的图表库
flutter_vignettes
flutter_spinkit：加载指示器

Getx

getx：GetX 是 Flutter 上的一个轻量且强大的解决方案：高性能的状态管理、智能的依赖注入和便捷的路由管理。
Flutter GetX使用---简洁的魅力！
GetX项目级实战
Flutter GetX 快递App（Bilibili视频）
使用Getx进行状态管理
使用Getx的依赖注入binding
Flutter状态管理终极方案GetX第一篇——路由

文章：

Q音直播Flutter包裁剪方案(iOS)
MOO 音乐中的Flutter 模糊方案分析
UME - 丰富的Flutter调试工具
2020年20个Flutter最漂亮的UI库和项目
Flutter在美团外卖的实践
亮相Google I/O，字节跳动是这样应用Flutter的
【译】 Flutter 延迟加载组件【包体积优化 | 动态化】
带你全面了解 Flutter，它好在哪里？它的坑在哪里？应该怎么学？
ListView流畅度翻倍！！Flutter卡顿分析和通用优化方案
Flutter瀑布流及通用列表解决方案
Flutter 实现类似美团外卖店铺页面滑动效果
Flutter 流畅度优化组件 Keframe
Flutter - 循序渐进 Sliver

电子书：

Flutter技术解析与实战.pdf
《Flutter实战》

知识库：

闲鱼技术/Flutter
Flutter学习指南
Flutter老孟/控件大全

参考资讯：

字节跳动为何选用Flutter？并非最优选，但它可能是不一样的未来!
Flutter2新特性
Flutter2.0重磅发布！带你一文打尽Flutter Engage