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.

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

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.