Hi, I'm wondering if anyone would be willing to lo...

# compose

[Nat Strangerweather]

Hi, I'm wondering if anyone would be willing to look at my code (a couple of composables) on Pastebin. The problem is that I am trying to pass my accentColor.value down from my first to my second Composable, and for some reason, this is only working for the last of my four accentColor values. I'm still learning and would be grateful for the help... 😊

[Zach Klippenstein (he/him) [MOD]]

If you post a link, i’m sure someone will look at it 😉

[Nat Strangerweather]

I did, click on Pastebin. 🙂

[robnik]

It looks like you're modifying the MutableState during the composition, which is not what you want. Is accentColor really state? It looks like it could be a local val , different for each of the "options".

[Nat Strangerweather]

Thanks for looking. I think it is a state because the color changes depending on which button I click in the QuickOptions Composable.

[Nat Strangerweather]

So basically I worked out that state hoisting would be the best way. But obviously I could be completely wrong.

[Zach Klippenstein (he/him) [MOD]]

My bad, apparently i don’t see links unless they start with http 🙈

[Zach Klippenstein (he/him) [MOD]]

accentColor.value = when (index) {
                0 -> if (isEnabled) Color(0xff81C784) else disabledColor
                1 -> if (isEnabled) Color(0xff9575CD) else disabledColor
                2 -> if (isEnabled) Color(0xffFF8A65) else disabledColor
                3 -> if (isEnabled) Color(0xff5C6BC0) else disabledColor
                else -> Color.Unspecified
            }

That looks like code that should be in an event handler somewhere instead of in the composition directly

[Jeisson Sáchica]

As stated above, the problem is that you are changing accentColor.value on composition inside the forEachIndexed so the first time the composable is created the states is changed four times and only the last one seems to be applied. I think what you want is to move the assignment to the onClick callback.

onClick = {
    if (isSelectable == true) {
        accentColor.value = when (index) {
            0 -> if (isEnabled) Color(0xff81C784) else disabledColor
            1 -> if (isEnabled) Color(0xff9575CD) else disabledColor
            2 -> if (isEnabled) Color(0xffFF8A65) else disabledColor
            3 -> if (isEnabled) Color(0xff5C6BC0) else disabledColor
            else -> Color.Unspecified
        }
        ...
    }
}

[Jeisson Sáchica]

Oops you beat me to it xD

[Nat Strangerweather]

Thank you all, that's really helpful! You guys are very kind! 😀

[Jeisson Sáchica]

There might be special cases, but I think that whenever you are updating a variable or doing something that causes a change, it should be on a callback or event handler and not directly in composition because you can't control when composition will happen

[Jeisson Sáchica]

Also, I noticed you are passing the context down from your top composable to where you actually use it. You can easily access the context from AmbientContext.current

[Nat Strangerweather]

Ah ok great, I'll look it up! Cheers.

[Jeisson Sáchica]

Which button do you want to be colored initially?

[Nat Strangerweather]

Initially, the ones in the composable called QuickOptions.

[Jeisson Sáchica]

All of them? There are four

[Nat Strangerweather]

yes, they each have their own color when pressed, and depending on which one is pressed, I want the toggles further down to have that color too.

[Jeisson Sáchica]

Ok, couple of things, the reason why they show without any color initially is because accentColor is initialized like this *val* accentColor = remember { mutableStateOf(Color.Unspecified) }

[Jeisson Sáchica]

So they will initially all have Color.Unspecified

[Nat Strangerweather]

The thing is I can't specify the colors at this stage because I have no access to the index.

[Nat Strangerweather]

I'm sure it's quite simple to pass a color down between two composables, but I just can't do it for some reason...

[robnik]

Remove the color state and don't pass it. Lift the selected index state up one level and pass that down. Then use that to select the color for the toggles.

[Jeisson Sáchica]

You are already doing it with the accentColor, the problem is that you actually don't need it in the QuickOptions compoosable

[Jeisson Sáchica]

this block

when (index) {
                0 -> if (isEnabled) Color(0xff81C784) else disabledColor
                1 -> if (isEnabled) Color(0xff9575CD) else disabledColor
                2 -> if (isEnabled) Color(0xffFF8A65) else disabledColor
                3 -> if (isEnabled) Color(0xff5C6BC0) else disabledColor
                else -> Color.Unspecified
            }

should be directly assigned to the backgroundColor of each button

[Nat Strangerweather]

Ok, so pass the index as a parameter rather than the color?

[Jeisson Sáchica]

colors = ButtonConstants.defaultButtonColors(
    backgroundColor = when (index) {
        0 -> if (isEnabled) Color(0xff81C784) else disabledColor
        1 -> if (isEnabled) Color(0xff9575CD) else disabledColor
        2 -> if (isEnabled) Color(0xffFF8A65) else disabledColor
        3 -> if (isEnabled) Color(0xff5C6BC0) else disabledColor
        else -> Color.Unspecified
    }
),

[Nat Strangerweather]

@Jeisson Sáchica Ok, I understand, makes sense!

[Jeisson Sáchica]

Then remove the MutableState from the composable and just take a lambda

[Jeisson Sáchica]

fun QuickOptions(context: Context, onColorChanged: (Color) -> Unit) {
    ...
}

[Nat Strangerweather]

briiliant, thanks for this, will try it now 😊

[Jeisson Sáchica]

And on the callback of the Button call the lambda with the new color:

onClick = {
    if (isSelectable == true) {
        val newColor = when (index) {
            0 -> if (isEnabled) Color(0xff81C784) else disabledColor
            1 -> if (isEnabled) Color(0xff9575CD) else disabledColor
            2 -> if (isEnabled) Color(0xffFF8A65) else disabledColor
            3 -> if (isEnabled) Color(0xff5C6BC0) else disabledColor
            else -> Color.Unspecified
        }
        onColorChanged(newColor)
        ...
    }
}

And finally you can pass the lambda on your top composable:

QuickOptions(context = context, accentColor) { newColor ->
    accentColor.value = newColor
}

[Nat Strangerweather]

@Jeisson Sáchica Just to say that it is now working perfectly. Thanks again for your help! 👍