Hi, I was wondering if anyone understands how `Cro...

# compose

[Archie]

Hi, I was wondering if anyone understands how Crossfade composable work? How does it it able to fade in and fade out the Composables? Why are there two Stack inside Crossfade? What exactly does invalidate do? and so on and so forth.. I would like to create a custom transition of my own but i struggle to understand how it works. Any guide on where I should start so I could understand these concepts better?

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

invalidate is just a function that manually triggers recomposition. Normally, recomposition is triggered automatically when you change the value in a State object. However, if you’ve factored your state out into non-Composable code and need to trigger recomposition from outside a Composable function, you can use invalidate.

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

The first stack,

Stack(Modifier.drawOpacity(opacity.value)) {
    children()
}

Is just there to apply the opacity to the children() composable. It could theoretically be any layout composable. Normally children() will include its own top-level layout, which the caller can choose to be appropriate for itself, but compose doesn’t require a composable to specify a layout. In the case where children() doesn’t define its own layout, this will be used instead. Stack or Column are probably the most reasonable defaults.

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

The second stack is what is used to actually draw the two crossfading composables on top of each other.

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

Then the basic way it works is:

1. Create a list of all the children/composables that are currently visible. Usually this list will only contain a single item, but it will contain more than one during an actual transition.
2. For each child, figure out how to change its appearance. Crossfade does this by simply drawing it with a varying opacity, but you could apply virtually any transformation here by using different modifiers. Associate the child with a composable function that wraps the original child with the modifier applied (this is the first stack).
3. On every composition, loop through all the visible children and call their wrapped composable functions.

When a new child (key) is detected, it gets added to the list in 1. When a transition is finished, it gets removed from the list.

3 uses the key function to ensure that, even if the order of the children in the list changes, the child's state is preserved. This is required because composable "identity" is based on the order of execution - so it the list changes, and the last item is now the first, it would be invoked in a different position than before which means that, by default, compose would treat it as a completely new composable (losing any internal state that it had been keeping). Using the key function, tells compose that the child just moved instead.

[Archie]

Thank you very much