Hey 🙂 I'm having trouble with my first animation. I'm trying to create a custom stepper and I want to animate the transition when the steps are incremented, so I'm rendering the "empty" stepper in background and then my idea was to render on top of that another stepper in a "step done" state, only if the step is actually done, using AnimatedVisibility. For that I am using as state a list of boolean values, but if I try to iterate over them and call AnimatedVisibility I'm getting an error: "@Composable invocations can only happen from the context of a @Composable function"

val doneSteps by remember { mutableStateOf(/* my logic for boolean value */ }

doneSteps.forEach {
    // If i try to put AnimatedVisibility here I get the error
}

What is the right approach?

forEach

doesn't accept composable function but you can use for statement:

for (step in steps) { ... }

.

I tried but I am getting the exact same error... I did this:

for (i in doneSteps.indices) {
            AnimatedVisibility(visible = doneSteps[i]) {
                drawCircle(notDoneColor, 23f, offsets[i])
                previousOffset?.let {
                    drawLine(doneColor, it, offsets[i], 17f,
                        blendMode = BlendMode.DstOver)
                }
                previousOffset = offsets[i]
            }
        }

You can’t use composables in a canvas. You can use multiple `Canvas`es in `AnimatedVisibility`s.

But the

visible

param in

AnimatedVisibility

must be a boolean, not a list of booleans... how do I handle that?

I mean multiple `AnimatedVisibility`s.

Yes, but I cannot use them inside loops... and we return to the initial problem

Was I not clear? I mean using multiple `Canvas`es in multiple `AnimatedVisibility`s:

for (i in doneSteps.indices) {
    AnimatedVisibility(visible = doneSteps[i]) {
        Canvas(modifier) { /* Draw step i */ }
    }
}

Oh, was completely missing the point, thanks, I'll try