Hello, I made a list of toggles but when I toggle them they are all moving at the same time instead ...

# compose

[Nat Strangerweather]

Hello, I made a list of toggles but when I toggle them they are all moving at the same time instead of moving independently of each other. Any ideas how I can toggle them individually?

val checkedState = remember { mutableStateOf(true) }

    VerticalGrid(modifier = Modifier.padding(start = 30.dp, end = 30.dp)) {
        listOf(
            "Alarms",
            "Media",
            "Touch",
            "Reminders",
            "Events",
            "Repeat Callers"
        ).forEachIndexed { index, string ->
            Column(
                Modifier.fillMaxWidth().padding(20.dp),
                horizontalAlignment = CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                CustomToggle(
                    color = accentColor,
                    selected = checkedState.value,
                    onClick = {
                        checkedState.value = !checkedState.value
                        toggleAtIndex(index)
                    }
                )
            }
        }
    }
}

fun toggleAtIndex(index: Int) {
    when (index) {
        0 -> println(0)
        1 -> println(1)
        2 -> println(2)
        3 -> println(3)
        4 -> println(4)
        5 -> println(5)
    }
}

[tylerwilson]

Well, they are all using the same var for the state, so that is doing the right thing. 🙂 You need a separate var for each element…

[Nat Strangerweather]

You mean like checkedState0, checkedState1, etc?

[tylerwilson]

val checkedState: List<State<Bool>> or similar

[Nat Strangerweather]

oh, I see, thanks! 🙂

[tylerwilson]

yeah: alarmState, mediaState, touchState, etc

[Nat Strangerweather]

cool

[Brady Aiello]

Also,

fun toggleAtIndex(index: Int) {
    println(index)
}