文章目录
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 一切正常