I would like to change the color of both `iconComposable` and `textComposable` based on the `select...

# compose

[Daniele B]

I would like to change the color of both iconComposable and textComposable based on the selected flag. How should I do this correct?

[Bino]

animate*AsState should point you to the solution.

[Bino]

val color by animateColorAsState(
        targetColor = if (!isSelected) Color.Red else Color.Green,
        animationSpec = tween(durationMillis = 1000)
    )

[Daniele B]

@Bino thanks!
how do I apply the color to iconComposable and the textComposable though?

[Bino]

Just add a parameter to the Composable as recommended in Stateless composables

@Composable
fun iconComposable(color: Color) {

You could also put the selectionState into the composable but to reuse the same color I would put it into the callers code

[Daniele B]

to be honest, I would actually like to apply the Material Design colors, so I wouldn’t need to pass the color to the function
My problem is that I don’t know how to apply the color to a composable passed to a function

[Bino]

This doesn’t matter. The parameter is just kotlin code which can be anything.

val color by animateColorAsState(
    targetValue = if (!isSelected) MaterialTheme.colors.primary else MaterialTheme.colors.error,
    animationSpec = tween(durationMillis = 1000)
)

[Albert Chang]

You can't directly change the color of a composable function. To change icon tint color and text color you can check LocalContentColor. Example.

[Daniele B]

@Albert Chang it works! many thanks