'How can I place a button under the composable screen correctly?

How can I place a button under the AnimatedScreen? At the moment, the button is hidden and it is not visible. Shouldn't the elements in column be arranged sequentially, or is it a matter of the parameter fillMaxSize in AnimatedScreen?

Surface {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(10.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        AnimatedScreen(Modifier, rawId = R.raw.onboarding)
        Button(onClick = onContinueClicked) {
            Text(stringResource(R.string.continue_text))
        }
    }
}

And here is the code of my AnimatedScreen:

@Composable
fun AnimatedScreen(
    modifier: Modifier = Modifier,
    rawId: Int
) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = modifier.fillMaxSize()
    ) {
        val compositionResult: LottieCompositionResult = rememberLottieComposition(
            spec = LottieCompositionSpec.RawRes(rawId)
        )
        ScreenAnimation(compositionResult = compositionResult)
    }
}

@Composable
fun ScreenAnimation(compositionResult: LottieCompositionResult) {

    val progress by animateLottieCompositionAsState(composition = compositionResult.value)

    LottieAnimation(
        composition = compositionResult.value,
        progress = progress,
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.FillBounds
    )
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source