Flutter高阶用法之仿写bibili

项目框架及架构

image.png

技术栈：

1.必备技能

• 自定义组件
• 布局技巧
• 扁平化布局
• 调试技巧
• 沉浸式状态栏
• 自定义主题
• Dark Mode
• 依赖冲突
• 构建&打包

Flutter集成与打包Android应用
Flutter集成与打包iOS应用

2.核心原理

• Flutter路由原理剖析
• Flutter渲染原理剖析
• Flutter图片加载与缓存原理剖析
• 组件化原理和方案剖析
• 播放器源码分析

3.网络和存储

• 网络层管理框架
  • 请求可配置
  • 统一异常和返回处理
  • 支持Adapter模式
  • 支持拦截器
  • 无缝切换http和dio
• Dao层设计
• 统一缓存管理框架hi_cache

4.路由&导航

• 监听路由页面跳转
• 页面级生命周期实现
• 路由页面栈管理
• 未登录拦截
• Android物理返回键兼容处理
• schema跳转
• tabBar切换监听

5.图片&动画

• 主流图片库对比与选择
• 图片缓存
• 动画必备技能
  • AnimatedWidget
  • AnimatedBuilder
  • Tween
  • AnimationController
  • Animation
• Lottie动效
• 高斯模糊
• 登录动效
• 展开动效
• 视觉差滚动动效
• 弹幕播放动效

6.视频技术

• 主流视频播放器分析
• 播放器组件封装
• 自定义播放器UI
• 播放器交互实现
• 沉浸式播放
• 全屏播放

7.状态管理

• 主流状态管理框架provider、bloc、redux分析
• ProxyProvider、MultiProvider、Consumer
• provider性能优化

8.性能调优

• 界面帧率优化（帧率提升70%）

  
  image.png

Flutter 性能优化流畅度优化方案

• APP包大小瘦身（包大小减少66%）

Flutter包体大小优化

• 页面秒开
• 内存优化
• build()方法优化
• 列表优化方法
• 图片缓存优化

10.稳定性优化

• 异常捕获与上报

Flutter异常捕获

• 测试之道
  • 单元测试
  • Widget测试
  • 集成测试

Flutter测试之道

11.架构技术

组件化方案

• 基于可重用的目的，将一个大型App拆分成多个独立的组件或模块。
  • 每一个独立的组件都是一个单独的系统，可以单独维护、升级甚至直接替换，也可以依赖于别的独立组件
  • 只要组件提供的功能不发生变化，就不会影响其他软件和软件系统的整体功能
  • 组件化的中心思想是将独立的功能进行拆分
• 颗粒度拆分原则
  • 单一性原则
    • 每个组件仅提供一个功能(分而治之，每个组件都有自己固定的职责，专注做一件事)
    • 当你遇到不知道该放哪的代码时，就需要重新思考组件的设计和职责了
  • 抽象化原则
    • 组件提供的Api应尽量稳定，具有高复用性
    • (对外暴露的接口很少发生变化，做好功能抽象和接口设计，把所有可能变化的因子都在组件内做好适配，不要暴露给她它的调用方)
  • 稳定性原则
    • 不要让稳定的组件依赖不稳定的组件
    • 假如：A组件依赖了B组件，如果A组件很稳定，但是B组件经常变化，那么A组件就会跟着B的变化而经常适配从而变得不稳定了
  • 自完备性
    • 组件要尽可能自给自足，减少对其他底层组件的依赖，达到代码可复用的目的。
    • 比如：A组件只是依赖某个大B组件中的某个方法，这是更好的处理方式是：剥离A组件对B组件的依赖，直接把这个方法拷贝到A组件中。
• 组件化实施步骤
  • 剥离与业务无关的基础功能
    • 网络操作
    • 本地缓存
    • 第三方库封装
      • 考虑到后续的维护适配成本，最好再封装一层，使项目不直接依赖外部代码，方便后续更新或替换
      • 如：基于flutter_swiper 封装了hi_banner等
    • UI组件等
    • 将它们封装为独立的基础库后，我们在项目里用pub来管理
  • 抽象业务模块
    • 登录模块
    • 首页模块
    • 详情模块
    • 排行榜模块等
    • 遵循先粗后细，只要能将大体划分清晰的业务组件进行拆分，后续就可以通过分布迭代、局部微调，最终实现整个业务项目的组件化。
  • 最小化服务能力
    • 根据上面的颗粒度拆分原则修正各个组件下的依赖。以及最小化对外暴露的能力

Flutter网络层框架hi_net架构

• 对于繁杂的业务网络层所面临的挑战
  • 切换成本高:第三方库存在不维护切换成本高的风险
  • 接口管理不便:大中型APP接口众多，不方便管理
  • 重复代码多：网络操作和业务代码耦合严重，不利于扩展
  • 开发效率低：不同三方库使用方式不统一，步骤繁琐开发效率低
• hi_net架构设计
  • 1.支持网络库插拔设计，且不干扰业务层
  • 2.简单易用，支持配置来进行请求
  • 3.Adapter设计，扩展性强
  • 4.统一异常和返回处理

image.png

统一缓存管理框架hi_cache架构

• 封装页面框架HiBaseTabState

12.软技能

• 架构思想
• 框架封装和架构搭建的能力
• 优秀框架的封装思路
• 疑难问题解决的方法论

2.快捷键

①AndroidStudio

image.png

②VSCode

image.png

补充

• Flutter布局嵌套过深导致代码可读性变差，通过代码抽取成多个method或widget减少嵌套层级
• 对第三方插件使用: 使用频率较高时对库进行封装，较少对业务代码无侵入，扩展性好
• FractionallySizedBox填满整个宽度
• Flexible填充剩余空间
• 抽取工具类，组件化时方便组件下沉
• 将通用的代码提取成通用的类、方法或组件
  • 将Tab组件通用代码拆成HiTab组件实现代码的复用
• 对于视频详情页数据处理
  • 默认是从上个视频列表传递过来model
  • 数据加载完成后给model重新赋值
  • 【用户在列表停留过久时，数据有可能不是最新的】
• 熟悉扁平化布局，減少嵌套地狱实现思路
• 熟悉页面加载优化并能实现页面秒开
• 状态栏样式(前台/后台切换变为白色/黑色)
  • 监听App应用的生命周期变化，做兼容处理 didChangeAppLifecycleState

列表图片的优化：

• 内存缓存
• 本地缓存

图片内存缓存

Flutter图片是支持内存缓存的，默认情况下Flutter支持1000张图片缓存到本地，并且这些图片的总计大小不得超过100MB。如果超过那么Flutter会根据LRU算法移除先前缓存的图片。所以我们可以适当调整缓存大小来增加列表图片加载的性能：

PaintingBinding.instance.imageCache.maximumSize= 2000;//最多2000张
PaintingBinding.instance.imageCache.maximunSizeBytes = 200 << 20;//最大缓存阈值

注意：图片缓存会对内存造成一定的压力，不建议内存缓存设置过大。

图片本地缓存

如果想增加本地缓存可以借助插件来完成:

# 图片加载
cached_network_image: ^3.1.0

列表常驻内存

默认情况下放在PageView中的页面切换走时会被销毁，再次切换回来会导致页面被重新创建，如果页面中有列表那么整个列表将被重新加载，降低用户体验。
解决：让页面的State实现 AutomaticKeepAliveClientMixin:

class _HomeTabPageState extends State<HomeTabPage> with AutomaticKeepAliveClientMixin
{
  
  @override
  bool get wantKeepAlive => true;
}

列表数量不足时无法下拉刷新和上拉加载更多，怎么处理？

StaggeredGridView.countBuilder(
  physics: const AlwaysScrollableScrollPhysics()
)

HiState处理页面状态异常

• 处理页面状态异常
• setState() called after dispose()问题分析【在dispose之后调用setState会触发此问题】

ListView顶部多出间距处理

MediaQuery.removePadding(
  removeTop: true,
  context: context,
  child:ListView()
)

图片渐变加载处理

transparent_image: ^2.0.0-nullsafety.0

解决iOS9/Android无法铭文传输的问题【http链接】

iOS

Info.plist中添加

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Android

AndroidManifest.xml中添加

android:usesCleartextTraffic="true"
tools:targetApi="28"

如：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.flutter_bili">
      <application
        android:label="flutter_bili"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true"
        tools:targetApi="28"
        >

源码地址：
https://gitee.com/flutter_steven/flutter_bilibili.git