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 一切正常