I have created a shader that makes the image transparent in the form of a gradient. I want to overlay white text on top of this image, but the shader acts on it as well.
Problem example
My code:
Stack(
children: [
SizedBox(
height: 90,
width: MediaQuery.sizeOf(context).width*0.35,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
child: Text('Artist',
overflow: TextOverflow.ellipsis,
style: interFS15,
),
),
Flexible(
child: Text('Track name',
overflow: TextOverflow.ellipsis,
style: interFS15,
),
),
],
),
),
Container(
height: 100,
width: MediaQuery.sizeOf(context).width*0.4,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(50), bottomRight: Radius.circular(50)),
),
child: ShaderMask(
shaderCallback: (rect) {
return LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.transparent,
Colors.black,
],
).createShader(Rect.fromLTRB(0, 0, rect.width, rect.height));
},
blendMode: BlendMode.dstIn,
child: Container(
foregroundDecoration: BoxDecoration(
borderRadius: BorderRadius.only(topRight: Radius.circular(50), bottomRight: Radius.circular(50)),
gradient: LinearGradient(
colors: [
Colors.black.withOpacity(0.7),
Colors.black.withOpacity(0.7)
],
begin: Alignment.centerRight,
end: Alignment.centerLeft
)
),
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(50),
bottomRight: Radius.circular(50)
),
child: Image.asset(
'assets/images/algorithm.png',
fit: BoxFit.cover,
),
),
)
),
)
],
)
the problem is precisely with shadermask, because when you change other boxdecoration, which are made to darken the image, nothing changes with the text.
how can I avoid ShaderMask embedding on other elements in the Stack?