我需要实现着色器掩码在颤振的图像

Question

我正试图用颜色Color(0xFFFF0000)和透明度29%将ShaderMask仅实现到下面容器中的背景图像，但我无法做到，我实现的下面代码将屏蔽容器的所有元素，但我只希望屏蔽下面代码中的背景图像，请指导我该如何做到这一点？

ShaderMask
( shaderCallback: (rect){
return LinearGradient(
begin: Alignment.center,
end: Alignment.center,
colors: [
Colors.transparent,
Color(0xFFFF0000),
]
).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.color,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: new BoxDecoration(
image: DecorationImage(
image: AssetImage('images/background.jpg',),
fit: BoxFit.cover,
),
)
child:Container()
)
)

Answer 1

使用堆栈和着色器小部件

class BackgroundImageExample extends StatelessWidget {
const BackgroundImageExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: [
backgroudImage(),
Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: Column(
children: [
// your body content here
],
),
),
),
],
);
}
Widget backgroudImage() {
return ShaderMask(
shaderCallback: (bounds) => LinearGradient(
colors: [Colors.transparent, Color(0xFFFF0000)],
begin: Alignment.center,
end: Alignment.center,
).createShader(bounds),
blendMode: BlendMode.darken,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/background.jpg'),
fit: BoxFit.cover,
colorFilter: ColorFilter.mode(Colors.black45, BlendMode.darken),
),
),
),
);
}
}

Answer 2

您可以使用Stack小部件。然后在上面你的背景容器。最重要的是你自己的小部件。