Konfetti on click problem

[behu-kea]

I really love this confetti animation, but am struggling to create konfetti on button click. I have it working when the activity is loaded. I am using Kotlin and Compose without xml. I have tried things like:

setContent {
    var position by remember {
        mutableStateOf(2f)
    }
    Button(onClick = {
        position = 5f;
    }) {
        Text(
            text = "Spray confetti" + position.toString())
    }

    KonfettiView(
        modifier = Modifier.fillMaxSize(),
        parties = listOf(Party(
            speed = 0f,
            maxSpeed = 30f,
            damping = 0.9f,
            spread = 360,
            colors = listOf(0xfce18a, 0xff726d, 0xf4306d, 0xb48def),
            emitter = Emitter(duration = 100, TimeUnit.MILLISECONDS).max(100),
            position = Position.Absolute(position, 1f)
        ))
    )
}

I have also tried

var party by remember { mutableStateOf<Party?>(null) }

Button(onClick = {
    party = Party (emitter = Emitter(duration = 5, TimeUnit.SECONDS).perSecond(30))
}) {
    Text(text = "Spray confetti!")
}

KonfettiView(
    modifier = Modifier.fillMaxSize(),
    parties = party?.let { listOf(it) } ?: emptyList()
)

Can someone please help?

[behu-kea]

Related: #305

[jastigall392]

- ```

[dazza5000]

What solution did you find?

[dazza5000]

You can wrap KonfettiView in a key to achieve this effect

            key(content) {
                if (content.konfettiState == KonfettiState.Started) {
                   KonfettiView(
                        modifier = Modifier.fillMaxSize(),
                        party = KonfettiUtil.getParty(colors = Color.KonfettiColors)
                    ) {
                        onFinishConfettiAnimation.invoke()
                    }
                }
            }

key can be something like this

@Composable
fun RecreateComposableExample() {
    var resetKey by remember { mutableStateOf(0) }

    Column {
        // The button will reset the composable below
        Button(onClick = { resetKey++ }) {
            Text("Recreate Composable")
        }

        // The composable to be recreated
        key(resetKey) {
            ComposableToRecreate()
        }
    }
}

@Composable
fun ComposableToRecreate() {
    var counter by remember { mutableStateOf(0) }

    Column {
        Text(text = "Counter: $counter")
        Button(onClick = { counter++ }) {
            Text("Increment Counter")
        }
    }
}