Flutter简介
Flutter 由 Google 的工程师团队打造,用于创建高性能、跨平台的移动应用。Flutter 针对当下以及未来的移动设备进行优化,专注于 Android and iOS 低延迟的输入和高帧率。
Flutter 可以给开发者提供简单、高效的方式来构建和部署跨平台、高性能移动应用;给用户提供漂亮、快速、jitter-free 的 app 体验。
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框架图:
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 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。
文章:
- 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