Flutter系列（一）：Flutter在开眼快创的实践

快手大前端技术

于 2021-09-28 11:06:17 发布

阅读量657

点赞数

文章标签： flutter

本文链接：https://blog.csdn.net/KSdaqianduan/article/details/120524912

版权

本文介绍了开眼快创在Flutter上的实践经验，包括纯Flutter开发的优势，如UI统一、功能统一、逻辑统一。文章讨论了整体架构、状态管理和通信，重点讲述了BLoC、Redux以及gRPC&ProtoBuf在解决状态管理和跨平台通信问题上的应用。此外，还介绍了自定义的KRoute路由库，以解决导航问题。最后，文章强调了Flutter在音视频领域的潜力，并预告了后续的相关分享。

摘要由CSDN通过智能技术生成

背景介绍

随着跨端方案技术的不断演进，Flutter作为新一代自渲染引擎跨端方案，也随之受到了越来越多业内开发者的青睐，并且因为官方以及社区开发者持续对其版本进行迭代与优化，解决了大部分的性能和易用性问题，所以，Flutter也快速进入了 2.0时代。

开眼快创[1]是围绕商业化广告创意构建的一款产品，其目标人群涵盖了供应商、代理商、广告主、商家号以及视频行业等从业者，产品的目标是提供智能化生产素材相关的产品能力，从而达到降低商业属性用户生产（创意制作）门槛的目的，大幅提升广告创意质量，提高素材消耗。它的主要功能包含：

创作：模板视频、视频编辑、一键大片
创意灵感：精选案例、快手热门、优质广告
创意学院：创意课程、课程直播等
数据分析：广告素材投放数据报表等

开眼快创的UI展示部分是全部使用Flutter开发的，除了普通页面例如列表页外，基于Flutter，我们实现了在数据分析场景下的各种图表绘制。同时在音视频领域，我们也落地了一些功能场景，例如视频直播、视频编辑、模板视频等。本文主分享的是开眼快创团队在Flutter上的实践。

整体架构

开眼快创是纯粹用Flutter开发的项目，其整体采用组件化分层架构，如下图：

最底层是平台嵌入层，目前只有Android和iOS。在Flutter 2.0版本发布后，平台嵌入层这里可以有更多想象的空间。通信层则提供了平台层和Flutter App之间的通信能力，除了比较熟悉的Platform Channel和外接纹理以外，我们在图片处理和视频编辑的功能中使用了性能更高效的Dart FFI，将在后文中详细介绍。在Flutter应用的最顶层是App工程，也就是开眼快创App。中间层是业务层，目前还没有抽取到独立库，未来可能会考虑把视频编辑抽取成独立的业务库。下面是基础组件层，它封装了独立的通用库用来向上提供基础能力，通过Pub远程依赖，降低项目耦合度，同时也可以反哺Flutter平台建设，降低其余Flutter项目的开发成本。

目前已经沉淀10+个通用组件，并发布4个组件到移动开发者中心。Flutter本身可以独立处理网络请求、文件读写以及UI绘制等主要功能，除了音视频需要原生参与，大部分业务场景均由Flutter独立完成，整个App的业务代码90%以上由Flutter来实现，原生基本不需要参与业务开发。纯Flutter开发可以保证：

UI 统一
功能统一
逻辑统一

以上几点的统一，对于业务开发，特别是在复杂业务场景下（如视频编辑），可以做到双端基本完全一致，这就省去了双端逻辑对齐和UI对齐的成本。同时也不用管理混合栈，因为所有的页面都在Flutter端，了解Flutter开发的同学应该都知道维护混合栈的管理非常麻烦，且目前市面上已有的混合栈管理方案也都存在需要持续适配新版本 Flutter的问题，所以使用纯Flutter开发不论是在开发阶段，还是在后期维