CODEWITHSUNDEEP
flutterdartimage-maskingflutter-image
user14185798
user14185798

Reputation:

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

Upvotes: 0

Views: 5801

Answers (3)

Sanju Bhatt
Sanju Bhatt

Reputation: 1142

if you just want to add the color above the decoration image of the container you can use foregroundDecoration property of the container

Container(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  decoration: BoxDecoration(
    image: const DecorationImage(
      image: AssetImage(
        'images/background.jpg',
      ),
    ),
  ),
  foregroundDecoration: BoxDecoration(
    color: Color(0xFFFF0000).withOpacity(0.29),
  ),
)

Upvotes: 2

techwithsam
techwithsam

Reputation: 341

Using the stack and shader widget

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),
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Rajeshkumar
Rajeshkumar

Reputation: 895

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

Upvotes: 0

Related Questions