[英]How to create a blur with a linear gradient in Flutter
我正在尝试在 Flutter 内部创建一个小部件,它的作用类似于 BackdropFilter 小部件并模糊它后面的任何东西。 尽管与 BackdropFilter 不同,这种模糊度不应该均匀分布,而是线性地逐渐增加模糊度。
有没有人有任何想法。 谢谢
现在似乎可以使用新的ImageFiltered
小部件。
我通过这个GitHub 评论找到了一个代码示例:
Stack(
alignment: Alignment.bottomCenter,
fit: StackFit.expand,
children: <Widget>[
Image.network(
image,
fit: BoxFit.cover,
alignment: Alignment.bottomCenter),
ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.black, Colors.black.withOpacity(0)],
stops: [0.4, 0.75]).createShader(rect);
},
blendMode: BlendMode.dstOut,
child: Image.network(
image,
fit: BoxFit.cover,
alignment: Alignment.bottomCenter),
)
),
])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.