[FIXED] How to scroll Jetpack Compose screen that overflows its contents?

Issue

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?

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.

Answered By - Primož Ivančič
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)