[FIXED] Jetpack Compose animation finished listener not called

Issue

I'm struggling to use Jetpack Compose Animation to achieve a (supposedly simple) effect: in the case of an error, a control's background color should flash red, and after a short delay then fade back to normal (transparent).

My current approach is to model this with a boolean state shouldFlash which is set to true when an error occurs, and is set back to false when the animation completes. Unfortunately it seems the finishedListener passed to animateColorAsState is never called. I attached a debugger and also added a log statement to verify this.

What am I doing wrong?

Sample (button triggers error):

@Composable
fun FlashingBackground() {
    Column(modifier = Modifier.size(200.dp)) {
        var shouldFlash by remember { mutableStateOf(false) }
        var text by remember { mutableStateOf("Initial") }
        FlashingText(flashing = shouldFlash, text = text) {
            shouldFlash = false
            text = "Animation done"
        }

        Button(onClick = {
            shouldFlash = true
        }) {
            Text(text = "Flash")
        }
    }
}

@Composable
fun FlashingText(flashing: Boolean, text: String, flashFinished: () -> Unit) {
    if (flashing) {
        val flashColor by animateColorAsState(
            targetValue = Color.Red,
            finishedListener = { _ -> flashFinished() }
        )
        Text(text = text, color = Color.White, modifier = Modifier.background(flashColor))
    } else {
        Text(text = text)
    }
}

Compose version: 1.0.5 (latest stable at time of writing), also in 1.1.0-beta02

Solution

Anyway, to understand this, you need to know how the animateColorAsState works internally.

It relies on recompositions - is the core idea.

Every time a color changes, a recomposition is triggered, which results in the updated color value being reflected on the screen. Now, what you are doing is just using conditional statements to DISPLAY DIFFERENT COMPOSABLES. Now, one Composable is actually referring to the animating value, that is, the one inside your if block (when flashing is true). On the other hand, the else block Composable is just a regular text which does not reference it. That is why you need to remove the conditional. Anyway, because after removing the conditional, what remains is only a single text, I thought it would be a waste to create a whole new Composable out of it, which is why I removed that Composable altogether and pasted the Text inside your main Composable. It helps to keep things simpler enough. Other than this, the answer by @Rafiul does work, but there is not really a need for a Composable like that, so I would still recommend using this answer instead, so that the code is easier to read.

ORIGINAL ANSWER:

Try moving the animator outside the Child Composable

@Composable
fun FlashingBackground() {
    Column(modifier = Modifier.size(200.dp)) {
        var shouldFlash by remember { mutableStateOf(false) }
        var text by remember { mutableStateOf("Initial") }
        val flashFinished: (Color) -> Unit = {
            shouldFlash = false
            text = "Animation done"
        }
        val flashColor by animateColorAsState(
            targetValue = if (shouldFlash) Color.Red else Color.White,
            finishedListener = flashFinished
        )

        //FlashingText(flashing = shouldFlash, text = text) -> You don't need this
        Text(text = text, color = Color.White, modifier = Modifier.background(flashColor))
        Button(onClick = {
            shouldFlash = true
        }) {
            Text(text = "Flash")
        }
    }
}

Answered By - user17356317