Why doesn't the following code cause the rectangle to be blurred? ```Canvas( modifier = Modifier...

# compose

[0xf1f1]

Why doesn't the following code cause the rectangle to be blurred?

Canvas(
    modifier = Modifier
        .blur(20.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)
        .fillMaxSize()
) {
    drawRect(
        color = Color.White.copy(alpha = 0.5f),
        size = size,
    )
}

[Stylianos Gakis]

If you flip blur and fillMaxSize does it work as expected?

[0xf1f1]

no

[Stylianos Gakis]

Are you running it in an android version which does support blur?
If you put the blur modifier on some other composable does it work?

[0xf1f1]

Yes, I am using the latest libs. It does work when using an IconButton or something similar. It just doesn't work for drawRect or a Box with no contents

[Stylianos Gakis]

The library version does not matter. Some older Android versions simply don't support this at all.

If you put a blur in a Column around the canvas, and then inside that Column you have this canvas and an icon button which you say works, how does the end result look like?
So:

Column(blur()) {
  Canvas...
  IconButton...
}

[0xf1f1]

What do you mean by android then ? android studio ? I am running the latest version. If you mean com.android.application, I am running 8.8.0 - I did as you suggested and neither the Canvas nor the IconButton have a blur

[Stylianos Gakis]

I mean android version. Literally the OS version of the device you are running your app on. If it's a physical device, the Android version it runs. If it's an emulator, the API level you picked.

[Stylianos Gakis]

You should do the column suggestion I made above and show a screenshot of how that looks like.

[0xf1f1]

Oh sorry. I am running an emulator on API 35

[Stylianos Gakis]

Then blur should work indeed.

[0xf1f1]

Image attached

[0xf1f1]

okay, so I changed the canvas from fillMaxSize to size(100.dp) and now I get:

[0xf1f1]

the button blurs just fine, but the rectangle has the right opacity, but it does not blur the content behind it

[Stylianos Gakis]

Well yeah, blur blurs the content which you are applying it to, not other stuff that is behind.
If you want a way to blur some arbitrary background of some content you might wanna check this one out https://github.com/chrisbanes/haze

[0xf1f1]

sorry I didnt mean background in the literal sense: See

Row(
    Modifier.blur(20.dp)
) {
    Column {
        Canvas(
            modifier = Modifier.size(200.dp)
        ) {
            drawRect(
                color = Color.White.copy(alpha = 0.5f),
                size = size,
            )
        }
    }

    Column {
        greenbutton()
    }
}

[0xf1f1]

I just realised that the rect is blurring on the edges but not throughout the rect - is that normal ?

[Stylianos Gakis]

I can't tell since I don't have an image of what you're referring to

[0xf1f1]

The grey is the rectangle - you can see its blurring on the edge

[0xf1f1]

this looks like a bug

[romainguy]

The blur modifier blurs only the content not what's behind