Hey :slightly_smiling_face: I'm having trouble with my first animation. I'm trying to create a custo...

# compose-desktop

[Enrico Saggiorato]

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?

[Albert Chang]

forEach doesn't accept composable function but you can use for statement: for (step in steps) { ... }.

[Enrico Saggiorato]

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]
            }
        }

[Enrico Saggiorato]

I did this inside a Canvas

[Albert Chang]

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

[Enrico Saggiorato]

But the visible param in AnimatedVisibility must be a boolean, not a list of booleans... how do I handle that?

[Enrico Saggiorato]

I don't know maybe I'm using the wrong approach but I can't come up with a better one

[Albert Chang]

I mean multiple `AnimatedVisibility`s.

[Enrico Saggiorato]

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

[Enrico Saggiorato]

I mean, I need loops to do this, I don't know how many AnimatedVisibility I need

[Albert Chang]

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 */ }
    }
}

[Enrico Saggiorato]

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