How to scroll Jetpack Compose screen that overflows its contents?

Question

I have an Add Shopping List item Jetpack Compose screen which contains several TextField inputs and an image container at the bottom. The screen overflows at the bottom and is cut off. How can I scroll the screen?

Answer 1

Add Modifier.scrollable(..) to the container that you wish to make scrollable. Code would be something like this:

val scrollState = rememberScrollState()
...
Box( // or whatever your parent composable is
    modifier = Modifier
        .scrollable(state = scrollState, orientation = Orientation.Vertical)
) {
    ...
}

Of course, there are other Modifier methods for making composables scrollable that might fit better for your case.

Answer 2

If the approved answer is not working try like below

val scrollState = rememberScrollState()

Column(
    modifier = Modifier.verticalScroll(state = scrollState)
) { 
    ...
}

Do not forget to apply it to your parent composable