[SOLVED] How do I create a Jetpack Compose Column where a middle child is scrollable but all of the other children are always visible?


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under
CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

Issue

I am creating a Jetpack Compose Dialog that contains a Column where all of the elements should always be visible, except for the third element, which is a Text that should be scrollable if the text doesn’t fit the screen space. I almost achieved this with a secondary scrollable Column just for that Text element. However, this implementation pushes the bottom child (a button) out of view if there is a lot of text. Here is my code:

@Composable
fun WelcomeView(
    viewModel: WelcomeViewModel,
    onDismiss: () -> Unit
) {
    Dialog(onDismissRequest = onDismiss) {
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(Spacing.extraLarge))
                .background(Colors.backgroundBase)
                .padding(all = Spacing.medium)
        ) {
            Column {
                IconView(
                    name = IconViewNames.RUNNING_SHOE,
                    size = IconViewSizes.LARGE,
                    color = Colors.primaryBase
                )

                Text(
                    viewModel.title,
                    style = Text.themeBillboard,
                    modifier = Modifier.padding(bottom = Spacing.medium)
                )

                Column(
                    modifier = Modifier
                        .verticalScroll(rememberScrollState())
                ) {
                    Text(
                        viewModel.message,
                        style = Text.themeHeadline,
                        modifier = Modifier.padding(bottom = Spacing.medium)
                    )
                }

                Button(
                    onClick = onDismiss,
                    modifier = Modifier
                        .fillMaxWidth()
                        .clip(RoundedCornerShape(Spacing.medium))
                        .background(Colors.primaryBase)
                ) {
                    Text(
                        "Continue",
                        style = Text.themeHeadline.copy(color = textExtraLight),
                        modifier = Modifier.padding(all = Spacing.extraSmall)
                    )
                }
            }
        }
    }
}

@Preview
@Composable
fun PreviewWelcomeView() {
    WelcomeView(
        viewModel = WelcomeViewModel(
            firstName = "Wendy",
            htmlWelcomeMessage = PreviewTextFixtures.threeParagraphs
        ),
        onDismiss = {}
    )
}

This is what it (correctly) looks like when there is only one paragraph of text:

enter image description here

But this is what it looks like when there are three paragraphs. The text scrolls correctly, but notice the missing “Continue” button:

enter image description here

Solution

Use this for your middle (scrollable) composable

    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .weight(weight =1f, fill = false)

    ) {
        Text("Your text here")
    }

The key is to use fill = false.

Answered By – Francesc

people found this article helpful. What about you?