Stepper Material with Compose

Stepper Compose is a Composable UI library based on Jetpack Compose and designed following Material Guidelines.

Create classic material Stepper

Stepper(
      steps = List(8) { index ->
        Step(
          title = "Name of step ${index + 1}",
          subtitle = "Subtitle of step ${index + 1}"
        ) {
          Box(
            modifier = Modifier
              .height(250.dp)
              .fillMaxWidth()
              .background(color = Black38)
          )
        }
      }
    )
Kotlin

The Stepper includes state management on each step (TODO, LOADING, ERROR, COMPLETE) letting you the possibility to update each step easily.


TODO LOADING ERROR COMPLETE

Managing state with Stepper

Step(
  title = "My Step",
  state = state,
) {
when (state.value) {
    TODO -> Button(onClick = { 
    state.value = LOADING 
    triggerErrorAfterMillis(2000) }) { 
      Text("CLICK") 
    }
    
    LOADING -> CircularProgressIndicator()
    
    ERROR -> Button(onClick = { 
    state.value = COMPLETE
    nextStep() }) { 
      Text("RETRY") 
    }
      
    COMPLETE -> Text("Complete")
  }
}
Kotlin

Tech stack & Open-source libraries

GitHub

https://github.com/Xsims/compose-material-stepper