How to make some parts of an image/widget transparent as shown in the screenshots

Question

I want to make this image or widget at the end transparent with a LinearGradient gradient. Honestly I'm not entirely sure how to do this, because I only know how to make the entire image/widget transparent with the Opacity widget.

Can someone help me here with an general idea, how to do this?#

[ Screenshot of widget with transparent gradient at the bottom ]

[ Screenshot of image with transparent gradient at the bottom ]

score 2 · Accepted Answer · answered Dec 10 '20 at 10:51

In the end the answer was fairly simple because there is already a widget available for this task. the widget name is ShadowMask.

Here is the part of the code which enabled me to get the above effect.

return ShaderMask(
        shaderCallback: (rect) => LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.white, Colors.white.withOpacity(.2), Colors.transparent],
          stops: [.6,.8, .9],
        ).createShader(rect),
        child: ...

Depending on which degree you want to achieve this effect you can change the color or stops for it.

How to make some parts of an image/widget transparent as shown in the screenshots

1 Answers1