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

EDIT: October 2023

At some point along the way this was changed and the old solution does not work anymore. The solution to this question is now:

val scrollState = rememberScrollState()
...
Column( // or whatever your parent composable is
    modifier = Modifier
        .verticalScroll(state = scrollState)
) {
    ...
}

Old solution

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

Answer 3

You can use the modifier verticalScroll on your container to achieve this.

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