ShaderMask of another widget is superimposed on Text in the Stack

  Kiến thức lập trình

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?

LEAVE A COMMENT