https://kotlinlang.org logo
#compose
Title
# compose
h

Hitanshu Dhawan

11/15/2020, 9:32 PM
Hey, I want to access
MaterialTheme.colors.background
inside my
transitionDefinition
but I as this function is not marked with
@Composable
I am getting this error
Copy code
@Composable invocations can only happen from the context of a @Composable function
Is the
transitionDefinition
function made non-composable on purpose? How can I make access these values inside
transitionDefinition
? My use case is to have different values for light and dark theme. Something like this…
Copy code
private val SomeTransitionDefinition = transitionDefinition<SomeState> {
    state(SomeState.State1) {
        this[backgroundColor] = if (MaterialTheme.colors.isLight) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
    }
}
d

Doris Liu

11/17/2020, 2:44 AM
In this case, you'll need to create the TransitionDefinition in a composable and remember it.
Copy code
val color = if (MaterialTheme.colors.isLight) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
val SomeTransitionDefinition = remember(color) { 
transitionDefinition<SomeState> {
    state(SomeState.State1) {
        this[backgroundColor] = color
    }
}
}
h

Hitanshu Dhawan

11/17/2020, 7:12 PM
Can we make two different `TransitionDefinition`s for Light and Dark theme, and use them inside of my composable depending on the theme? Which approach is better and clean?
d

Doris Liu

11/17/2020, 7:49 PM
You could make two `TransitionDefinition`s, it's an entirely valid approach. 🙂 But given the frequency of light/dark theme change, I'd re-create a
TransitionDefinition
when the theme changes.
h

Hitanshu Dhawan

11/18/2020, 5:30 AM
Ohh, got it. Thanks @Doris Liu :)
5 Views