flutterdartimage-maskingflutter-image

I need to Implement shader mask in flutter to the image


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()
                    )
)

Solution

  • You can use Stack widget. Then on top of that your background container. On top of that your own widget.