Jetpack Compose - Box with scrollable content

Question

My Composable looks as below:

fun Screen() {
    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier.align(Alignment.TopCenter)
        ) {
            // Content which is pretty large in height (Scrollable)
        }
        Column(
            modifier = Modifier.align(Alignment.BottomCenter)
        ) {
            // A button (CTA for next screen)
        }
    }
}

The requirement is let the CTA stick to the bottom of the screen and the actual content be scrollable. However, as per my implementation, if the actual content gets bigger in height, it pushes the CTA off the screen.

How do I make the CTA stick to the screen?

Gabriele Mariotti · Answer

You can use a Column instead of a Box applying the weight modifier to the 1st nested Column.
Something like:

Column() {
    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .weight(1f)
    ) {
        // Content which is pretty large in height (Scrollable)
    }
    Column(
    ) {
        // A button (CTA for next screen)
    }
}

Jetpack Compose - Box with scrollable content

1 Answers