Flutter 3.29.3 花屏问题记录

Flutter 3.29.3 花屏问题记录

问题记录

flutter版本3.29.3，代码大致为：

 ShaderMask(
              shaderCallback: (Rect bounds) {
                return LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Colors.transparent, // 透明
                    Colors.transparent, // 透明
                    Colors.black, // 渐变到不透明
                    Colors.black,
                    Colors.black,
                  ],
                  stops: [0.0, position, position + 0.03, 0.9, 1.0],
                ).createShader(bounds);
              },
              blendMode: BlendMode.dstIn, // 让渐变应用到内容上,会让内容被透明区域 "擦除"，实现顶部消失的效果。
              child: Selector<RoleChatPageViewModel, BotGetData?>(
                selector: (_, vm) => vm.botGetData,
                builder: (_, botInfo, child) {
                  return NotificationListener<ScrollNotification>(
                    onNotification: (notification) {
                      if (notification is UserScrollNotification) {
                        // println('用户拖动方向: ${notification.direction}');
                        if (notification.direction == ScrollDirection.forward) {
                          _handleScrollDirection(isScrollUp: true);
                        } else if (notification.direction ==
                            ScrollDirection.reverse) {
                          _handleScrollDirection(isScrollUp: false);
                        }
                      } else if (notification is ScrollStartNotification) {
                        // println('开始滚动');
                      } else if (notification is ScrollUpdateNotification) {
                        // println('滚动更新');
                      } else if (notification is ScrollEndNotification) {
                        // println('滚动结束');
                      }
                      return false;
                    },
                    child:  /// child;
                },
              ),
            )

用到了ShaderMask组件，加上这个页面放置在pageView中，可以频繁滑动切换。
在中低端手机上如果滑动快速，非常容易导致花屏。

解决尝试

后续定位可能是ShaderMask的问题，在安卓机上尤为明显，即便安卓关闭硬件加速也可能导致，去掉该组件则一切正常。
但是设计需要ShaderMask完成功能，后发现flutter不同版本有差异。

解决

切换版本到3.27.3 一切正常