I am trying to implement the ShaderMask
to only the background image in the container below with color Color(0xFFFF0000)
and transparency 29%
but I am not able to do so, the below code I have implemented it is masking all the elements of the container, but I want only the background image in the below code to be masked, please guide me how should I do that?
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()
)
)
You can use Stack widget. Then on top of that your background container. On top of that your own widget.