skydoves / Cloudy

☁️ Jetpack Compose blur effect library, which falls back onto a CPU-based implementation to support older API levels.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

update blur while scrolling LazyColumn below blur

MaximCemencov opened this issue · comments

I wanna create a screen with your really cool library but I got a issue with blur I wanna create a blue anything below my textField and I do it but while I scroll my list of items the blur does not update by the scroll and the scroll displays the outdated blur info

Screen.Recording.2024-07-02.at.21.31.31.mov

and I wanna create some effect like on telegram with blur:

Screen_Recording_20240702-214136_Telegram.mp4

my code:

var text by remember { mutableStateOf("") }
val rememberLazyColumnState = rememberLazyListState()

Box {
    LazyColumn(
        state = rememberLazyColumnState
    ) {
        items(100) { index ->
            Text(text = "Itemasd;klfja;kdfjka;lsjdfl;ajsdflasdlkf;alskdjf: $index")
        }
    }

    Box (
        modifier = Modifier.height(80.dp)
    ) {
        Cloudy(
            radius = 20,
            key2 = rememberLazyColumnState.firstVisibleItemIndex
        ) {
            Box(modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight())
        }
        OutlinedTextField(
            value = text,
            onValueChange = { text = it },
            placeholder = { Text("Search...") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
        )
    }
}

Hey @MaximCemencov, for now, Cloudy doesn't support the window blurring feature. It's one of my plans for the next release.