一、现象

4月18号当晚，App内进行了华东地区的猛狮专场直播。有用户出现了灰屏现象，无法正常查看讲解中的活动。

image.png

二、产生原因

8.12.0版本里修改了Flutter基础组件库关于图片加载的那一部分,导致了这边的场景使用上异常。

image.png

以上这一部分修改，是因为在开发购物车版本时，发现购物车中有大量的图片加载，如果购物车商品特别多会导致内存激升。为了修复这个问题，设置了默认最大内存缓存和最大硬盘缓存来限制内存的增长。

但是修改时，并没有考虑到，用户会传一些非常规的入参的进来，例如设置了width属性为double.infinity。直播间讲解中弹窗就是因为使用到了这一场景，从而导致Flutter异常。因为double.infinity不能调用.toInt()方法

三、解决方案

后来第二天，紧急上线了一个版本8.13.1，修复了这个问题。判断用户的入参是否合法，如果不合法则默认处理。

    if (image!.startsWith('http')) {
        int? maxWidth;
        int? maxHeight;
        if (width != null && width != double.infinity) {
          maxWidth = (width! * 2).toInt();
        }
        if (height != null && height != double.infinity) {
          maxHeight = (height! * 2).toInt();
        }
        return CachedNetworkImage(
          memCacheWidth: memCacheWidth ?? maxWidth,
          memCacheHeight: memCacheHeight ?? maxHeight,
          maxWidthDiskCache: maxWidthDiskCache ?? maxWidth,
          maxHeightDiskCache: maxHeightDiskCache ?? maxHeight,
          imageUrl: image!,
          placeholder: (_, __) =>
              LoadAssetImage(holderImg, height: height, width: width, fit: fit),
          errorWidget: (_, __, dynamic error) =>
              LoadAssetImage(holderImg, height: height, width: width, fit: fit),
          width: width,
          height: height,
          fit: fit,
        );
      }

四、总结反思

后续修改Flutter组件库时，需要进行足够的单元测试，尽量把所有的可能场景都给覆盖到
业务代码中利用插件动态检查，Flutter组件库具体使用的地方，每次更新Flutter组件库时，在业务代码中都能动态检查使用的地方，然后逐一排查是否有不兼容的场景。
加强自测强度，每次修改Flutter组件库的时候，责任到人，加强自测，尽量避免一些问题到了线上才能暴露。
Flutter组件库修改加强评审策略，一些大的改动点都需要提交PR

五、现有直播在使用的基础组件库

组件名称

所在业务场景

|
|

Gaps、Colours

直播页所有

|
|

LoadAssetImage、LoadImage

红包弹框、直播头像、直播活动、直播状态

|
|

showBottomModal

清晰度弹窗、小黄车

|
|

IOSStyleDialog

直播间公告

直播讲解中弹窗灰屏异常