A demo of blur for Jetpack Compose Desktop

DemoKMPBlur

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*

import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.GenericShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.blur
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

import androidx.compose.ui.window.Window
import androidx.compose.ui.window.WindowPosition
import androidx.compose.ui.window.application
import androidx.compose.ui.window.rememberWindowState

@Composable
fun LabelText(text: String, modifier: Modifier = Modifier) {
    Text(
        text = text,
        color = Color.White,
        modifier = modifier

            .padding(horizontal = 12.dp)

    )
}

@Composable
fun OffsetSlider(
    label: String,
    modifier: Modifier = Modifier,
    value: MutableState<Int>,
    range: ClosedFloatingPointRange<Float>,
    steps: Int = 10
) {
    Slider(
        value = value.value.toFloat(),
        onValueChange = { newValue ->
            value.value = newValue.toInt()
        },
        valueRange = range,
        steps = steps,
        modifier = modifier.padding(horizontal = 6.dp)
    )
}

@Composable
fun GradientCardWithSliders() {
    val blueX = remember { mutableStateOf(-0) }
    val blueY = remember { mutableStateOf(-0) }
    val redX = remember { mutableStateOf(0) }
    val redY = remember { mutableStateOf(0) }
    val lightBlueX = remember { mutableStateOf(0) }
    val lightBlueY = remember { mutableStateOf(0) }
    val applyBlur = remember { mutableStateOf(true) }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black),

        ) {
        Box(
            modifier = Modifier
                .padding(top = 20.dp, bottom = 20.dp)
                .align(Alignment.CenterHorizontally)
                .clip(RoundedCornerShape(30.dp))
                .width(300.dp)
                .height(300.dp)
                .blur(if (applyBlur.value) 90.dp else 0.dp)
                .background(Color(0xfff48fb1))
                .offset(x = blueX.value.dp, y = blueY.value.dp)
                .background(color = Color(0xff283593), shape = CircleShape)
                .offset(x = redX.value.dp, y = redY.value.dp)
                .background(color = Color(0xfff44336), shape = RoundedCornerShape(4.dp))
                .offset(x = lightBlueX.value.dp, y = lightBlueY.value.dp)
                .background(color = Color(0xff039be5), shape = GenericShape { size, _ ->
                    moveTo(size.width / 2f, 0f)
                    lineTo(size.width, size.height)
                    lineTo(0f, size.height)
                })

        )
        Row(verticalAlignment = Alignment.CenterVertically) {
            Text(
                text = "Apply Blur：",
                color = Color.White,
                modifier = Modifier.padding(start = 12.dp)
            )
            Checkbox(
                checked = applyBlur.value,
                onCheckedChange = { applyBlur.value = it },
                colors = CheckboxDefaults.colors(
                    checkedColor = Color(0xff6200EE),
                    uncheckedColor = Color(0xffffffff)
                )
            )

        }

        Row {
            Column(modifier = Modifier.weight(1f)) {
                LabelText("Blue X:")
                OffsetSlider(label = "Blue X", value = blueX, range = -150f..150f)
            }

            Column(modifier = Modifier.weight(1f)) {
                LabelText("Blue Y:")
                OffsetSlider(label = "Blue Y", value = blueY, range = -150f..150f)
            }

        }
        Row {

            Column(modifier = Modifier.weight(1f)) {
                LabelText("Red X:")
                OffsetSlider(label = "Red X", value = redX, range = -150f..150f)
            }
            Column(modifier = Modifier.weight(1f)) {
                LabelText("Red Y:")
                OffsetSlider(label = "Red Y", value = redY, range = -150f..150f)
            }

        }
        Row {
            Column(modifier = Modifier.weight(1f)) {
                LabelText("Light Blue X:")
                OffsetSlider(label = "Light Blue X", value = lightBlueX, range = -150f..150f)
            }
            Column(modifier = Modifier.weight(1f)) {
                LabelText("Light Blue Y:")
                OffsetSlider(label = "Light Blue Y", value = lightBlueY, range = -150f..150f)
            }
        }


    }
}


fun main() = application {
    Window(
        state = rememberWindowState(
            width = 900.dp,
            height = 640.dp,
            position = WindowPosition.Aligned(Alignment.Center)
        ),
        onCloseRequest = ::exitApplication,

        ) {
        GradientCardWithSliders()
    }
}