Hey :slightly_smiling_face: I'm having trouble wit...
# compose-desktop
e
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"
Copy code
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?
a
forEach
doesn't accept composable function but you can use for statement:
for (step in steps) { ... }
.
e
I tried but I am getting the exact same error... I did this:
Copy code
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]
            }
        }
I did this inside a Canvas
a
You can’t use composables in a canvas. You can use multiple `Canvas`es in `AnimatedVisibility`s.
e
But the
visible
param in
AnimatedVisibility
must be a boolean, not a list of booleans... how do I handle that?
I don't know maybe I'm using the wrong approach but I can't come up with a better one
a
I mean multiple `AnimatedVisibility`s.
e
Yes, but I cannot use them inside loops... and we return to the initial problem
I mean, I need loops to do this, I don't know how many AnimatedVisibility I need
a
Was I not clear? I mean using multiple `Canvas`es in multiple `AnimatedVisibility`s:
Copy code
for (i in doneSteps.indices) {
    AnimatedVisibility(visible = doneSteps[i]) {
        Canvas(modifier) { /* Draw step i */ }
    }
}
e
Oh, was completely missing the point, thanks, I'll try