Use a widget to mask and blend another widget, for example to imprint text onto surfaces.
A mask is an image, which is positioned in front of another image and affects this images in some way, where it is not empty.
Blending is a process which takes two images and produces a new image by applying a mathematical function to each pair of pixels from the input images. For some of these functions, the order of the arguments matters. That's why the input images are labled with
dst. A mask is usually the image labled with
The example below paints some text onto an image. The text is filled with the negative of the image.
WidgetMask( // `BlendMode.difference` results in the negative of `dst` where `src` // is fully white. That is why the text is white. blendMode: BlendMode.difference, mask: Center( child: Text( 'Negative', style: TextStyle( fontSize: 50, color: Colors.white, ), ), ), child: Image.asset('images/my_image.jpg'), );
maskwidget must not contain widgets which need compositing, such as
WidgetMask delegates to
child to lay itself out. It always has the same size as
mask is forced to adopt the same size as
child and positioned on top it.
During hit testing
mask is positioned over
dst to describe how the colors of two images are blended with each other. In the context of
mask is the