How to make step by step wizard in compose ? Is there any example code ?

# compose

[Akram Bensalem]

How to make step by step wizard in compose ?
Is there any example code ?

[nglauber]

I created one for my current project, unfortunately I can’t share the code here. But basically you’ll have (this is a pseudo code):

Row { // All the steps
    steps.forEachIndexed { index, s ->
       StepItem(s, index, lastIndex)
    }
}

The StepItem is something like this (again, pseudo code):

Column {
    Row (
        verticalAlignment = Alignment.CenterVertically
    ) {
       if (index != 0) DrawLine(Modifier.weight(1f)
       Box(Modifier.background(
           if (selected) colorSelected 
           else colorUnselected,
           CircleShape) {
           Text(step)
       }
       if (index != lastIndex) 
           DrawLine(Modifier.weight(1f)
    }
    Text(stepName)
}

I hope it helps you as a start point…

[Akram Bensalem]

@nglauber
Thank you so much ♥️
I built this

[nglauber]

Awesome!!! 👏 Glad to help