How to scroll Jetpack Compose screen that overflows its contents?

June 27, 2022

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 cutoff. How can I scroll the screen?

>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.