A modern programming language that makes developers happier.

kotlinlang

I have a `LazyVerticalGrid` with different grid spans. Within that grid I want a special kind of transparent item that can act as a window to what’s behind the grid. More in :thread:  

The idea is to show offers/packages/adverts while the user scrolls. 

```Box { 
  FullScreenSurprise()
  LazyGrid()
}```

Currently I do not apply any background to my LazyGrid() so the cutout can show what’s behind. 

Is there some way to morph/cutout/ with darwWithContent or any other modfier, for only that special item? 

As I have to very delicately handle the background and paddings for items. 

ScreenRecording_02-16-2025 22-45-51_1.MP4

You could potentially call `drawRect` with `BlendMode.Clear`, but that would (afaik) create a hole through the entire Compose view (not just that composable, it'll punch through everything behind it). Not sure if there's another way...

Alright I figured it out:
First, add a `graphicsLayer` modifier with `CompositingStrategy.Offscreen` to the parent composable (in this case, the `LazyVerticalGrid`):
```LazyVerticalGrid(
    ...,
    modifier = Modifier
        .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
        ...
)```
Then you can apply `BlendMode.Clear` on the child composable, and it'll only clear all the way up to the parent, because the parent created a separate graphics layer:
```YourChildComposable(
    ...,
    modifier = Modifier
        .drawWithContent { // if you don't care about the content, you could use drawBehind instead, or use a Canvas directly.
            drawRect(Color.Black, blendMode = BlendMode.Clear)
            drawContent() // only if you want to keep content (e.g. some overlay), if any.
        }
        ...
)```
That'll achieve the desired behavior.

Wow! This works flawlessly. Thank you so much <@U01A96FQB3Q>