This code path is wrong because the DrawMask affects all of the area in the mask rect.

Consider if the mask rect is 100x100 and the children only draw a tiny rectangle in the middle of that, say 40,40->60,60.

If this method draws normally then we execute a saveLayer and the saveLayer creates a 100x100 temporary texture and initializes it to transparency. The children then fill in pixels for the middle 20x20 part of that temp texture. Then we ask the shader to paint over the entire 100x100 area, most of which is transparency. If the shader/blend_mode specified do not modify transparent pixels (something that might happen with a linear gradient transparency modulation at least for some of the pixels in the mask area - a common case) then we end up with a tiny 20x20 area that has been blended over with the shader surrounded by a field of transparent pixels many of which were left transparent. When the saveLayer ends and that temp texture is blended back onto the background, it will only change the pixels modified in the temp buffer.

However, if you render the children to the backdrop with no saveLayer then they are now mixed in to the background. Then when you draw the mask after that, you will end up modifying all of those pixels in the 100x100 area, including the background pixels and end up with potentially different results because:

(shader output blend_moded with transparent pixels in the saveLayer) over the background

is not the same as (note the change of parentheses):

shader output blend_moded with (transparent pixels in the saveLayer over the background)

Additionally another problem can occur. The saveLayer will clip the rendering. If a developer takes a huge sub-scene that covers 1000x1000 pixels and applies a ShaderMask to it with a mask rect of 100x100, you have nothing here to prevent the children from rendering all over the background when they should have been rendering into (and clipped to) a 100x100 playground instead.

So, in the end, you do need a saveLayer of sorts anyway. It may still make things faster by caching the children, but it should not be able to elide the saveLayer without a lot of fancy testing on the type of shader, the blend_mode and the content of the children that will swamp just using a saveLayer.

Actually it looks like the bounds chosen for the saveLayer are the bounds of the layer which should be identical to the bounds of the children, so we would end up clipping the shader mask to the children rather than the children to the shader bounds...

In either case, any part of the save layer not rendered by the children would be transparent pixels for the shader to modify before they are blended back into the background.

We should create some specific test cases that cover this situation. I can imagine something along the lines of the following should show it:

Test 1, mask cannot affect background:

• background is cleared to a solid opaque color
• shader mask is run in a small rectangle with a blend mode of Clear
• result should be a solid screen of the opaque color because the Clear due to the shadermask will have only affected the saveLayer

The same thing could also be done with something like a gradient from opaque to transparent with a mode of DstIn. It should only have effect within the bounds of the mask rectangle and anywhere it is transparent should remain the background color.

Test 2, everything clipped to child bounds:

Then another test that has the children take up less room than the shader mask rectangle and the shader mask fill should be clipped to the bounds of the children due to the actions of the clipLayer.

Hey @flar as the test case do you mine this:

 Stack(
  children: [
    Positioned(
      top: 100,
      left: 150,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.green,
      ),
    ),
    Positioned(
      top: 100,
      left:170,
      child: SizedBox(
        width: 100,
        height: 100,
        child: ShaderMask(
          blendMode: BlendMode.clear,
          shaderCallback: (Rect bounds) {
            return const RadialGradient(
              center: Alignment.topLeft,
              radius: 1.0,
              colors: <Color>[Colors.yellow, Colors.red],
              tileMode: TileMode.mirror,
            ).createShader(bounds);
          },
          child: Flex(
            direction: Axis.horizontal,
            children: [
              Container(width: 50, height: 50, color: Colors.red,)
            ],
          ),
        ),
      )
    )
  ],
);

Has a green rect as the ShaderMask's background, and it has a small rect witch size is 50 * 50; ShaderMasker's blendMode is clear

We should create some specific test cases that cover this situation. I can imagine something along the lines of the following should show it:

Test 1, mask cannot affect background:

• background is cleared to a solid opaque color
• shader mask is run in a small rectangle with a blend mode of Clear
• result should be a solid screen of the opaque color because the Clear due to the shadermask will have only affected the saveLayer

The same thing could also be done with something like a gradient from opaque to transparent with a mode of DstIn. It should only have effect within the bounds of the mask rectangle and anywhere it is transparent should remain the background color.

Test 2, everything clipped to child bounds:

Then another test that has the children take up less room than the shader mask rectangle and the shader mask fill should be clipped to the bounds of the children due to the actions of the clipLayer.

Very good advice！Indeed, cached children should be painted using saveLayer, we have fixed it and added the test, cc @JsouLiang.

If I read that correctly, there is a green field at 100,150->200,250.
On top of that is a shadermask which should cover 100,170->200,270 so it is 20 "pixels" down from the green rect.
The shadermask child (to which it should be clipped) is at 100,170->150,220 so it covers half of the left side of the green rect. It is red, but that will be overwritten by the shadermask.

(I'm not familiar with how the Flex will affect that layout, though.)

The shadermask has an opaque linear gradient, but that will be ignored because it has a blend mode of kClear.

If the shadermask is clipped to the child then we end up with a green rectangle with an empty space covering the left half of its width from 20 pixels from the top to 30 pixels from the bottom. Did I read that right?

yes, right. In this case the ShaderMask is bigger than his child. I think it may be the test case which you described above.