I have a Card + Switch. How do I handle the state ...

# compose

[jaqxues]

I have a Card + Switch. How do I handle the state so it toggles on onClick of the Card, and I can use an onCheckedChange correctly?

[jaqxues]

Current solution

fun SwitchPreference(pref: Preference<Boolean>, text: @Composable () -> Unit) {
    var switchedState = true
    var active by remember {
        switchedState = false
        mutableStateOf(pref.getPref())
    }
    if (active) {
        pref.putPref(active)
    }
    Card(
        Modifier.fillMaxWidth().clickable(onClick = { active = !active}),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(Modifier.padding(16.dp)) {
            text()
            Spacer(Modifier.weight(1f))

            if (switchedState) {
                pref.putPref(active)
            }
            Switch(checked = active, onCheckedChange = {
                active = it
            })
        }
    }
}

[allan.conda]

use Modifier.toggleable() should be easier

[jaqxues]

on the card?

[allan.conda]

replace clickable() basically

[allan.conda]

removed switchState, you don’t need it

[jaqxues]

in that case, if you click directly on the switch, nothing happens

[allan.conda]

var toggled by remember{mutableStateOf(true)}
Modifier.toggleable(value = toggled, onValueChange = { toggled = it })

[jaqxues]

mhm, doesnt help a lot ig, the clickable is even shorter tbh

[allan.conda]

actually you seems you don’t need it, Switch already has toggleable inside

[allan.conda]

Card(
        Modifier.fillMaxWidth(),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(Modifier.padding(16.dp)) {
            text()
            Spacer(Modifier.weight(1f))

            var toggle by remember { mutableStateOf(pref.getPref()) }
            Switch(checked = active, onCheckedChange = {
                toggle = it
                pref.putPref(toggle)
            })
        }
    }

[jaqxues]

... In that case the entire card is not clickable and you have to click exactly on the switch

[jaqxues]

@Composable
fun SwitchPreference(pref: Preference<Boolean>, text: @Composable () -> Unit) {
    var switchedState = true
    var active by remember {
        switchedState = false
        mutableStateOf(pref.getPref())
    }
    Card(
        Modifier.fillMaxWidth().toggleable(active) { active = it },
        shape = RoundedCornerShape(8.dp)
    ) {
        if (switchedState)
            pref.putPref(active)

        Row(Modifier.padding(16.dp)) {
            text()
            Spacer(Modifier.weight(1f))
            Switch(checked = active, onCheckedChange = {
                active = it
            })
        }
    }
}

[jaqxues]

ended up with this, using and changing the state in both, card and switch

[allan.conda]

try:

var toggle by remember { mutableStateOf(pref.getPref()) }
    Card(
        Modifier.fillMaxWidth()
            .toggleable(value = toggle, {
                toggle = it
                pref.putPref(toggle)
            }),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(Modifier.padding(16.dp)) {
            text()
            Spacer(Modifier.weight(1f))

            Switch(checked = active, onCheckedChange = {
                toggle = it
                pref.putPref(toggle)
            })
        }
    }

[allan.conda]

I don’t get this part of your code:

if (switchedState)
            pref.putPref(active)

if it checks switched to true once, it will never turn off

[jaqxues]

then i have 2 putPrefs in 2 different "onToggle"/ "onCheckedChange"

[allan.conda]

it should be fine, your goal is that the card click and switch click works the same

[jaqxues]

switchedState is false for the initial value, true when its switched. (the remember { ... } is only executed on initial composition

[jaqxues]

so any recomposition (when "active" state changes) will trigger switchedState to be true

[jaqxues]

yeah it works, was just hoping for a more elegant solution

[allan.conda]

then that’s worse, it calls putPref on every recomposition

[allan.conda]

var toggle by remember { mutableStateOf(pref.getPref()) }
    val onToggle = { 
      toggle = it
      pref.putPref(it)
    }
    Card(
        Modifier.fillMaxWidth()
            .toggleable(value = toggle, onToggle),
        shape = RoundedCornerShape(8.dp)
    ) {
        Row(Modifier.padding(16.dp)) {
            text()
            Spacer(Modifier.weight(1f))

            Switch(checked = active, onCheckedChange = onToggle)
        }
    }

[jaqxues]

putPref should be executed on every recomposition

recomposition means the "active" state is changed, which is what i want

[allan.conda]

you shouldn’t expect that, the devs say recomposition can happen at any time, you shouldn’t trust it only happens when you change active

[jaqxues]

true

Switching back to local functions then ig