I want to make a composable scrollable in both dir...

# compose

[Naveen Perumal]

I want to make a composable scrollable in both directions with behaviour similar to that of spreadsheet. Adding vertical and horizontal scroll to the composable makes it scrollable in both directions. But the composable scrolls completely in either horizontal or vertical direction. If the user initially starts scrolling in horizontal direction and changes the direction to vertical in midway or if the user scrolls in between horizontal and vertical direction, the scroll still happens in either vertical or horizontal direction. I was able to achieve the required behaviour using dragGestures :

val verticalScrollState = rememberScrollState()
val horizontalScrollState = rememberScrollState()
val coroutineScope = rememberCoroutineScope()
Box(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .horizontalScroll(horizontalScrollState)
        .verticalScroll(verticalScrollState)
        .pointerInput(Unit) {
            detectDragGestures { change, dragAmount ->
                coroutineScope.launch {
                    verticalScrollState.scrollBy(-dragAmount.y)
                    horizontalScrollState.scrollBy(-dragAmount.x)
                }
                change.consume()
            }
        }
    )

But when using dragGestures, fling doesn't work. How to achieve the spreadsheet behaviour in a clean way?

[MR3Y]

You may want to take a look at MinaBox but It uses a LazyLayout and I'm not sure If you need that lazy behavior here, looking at how at handles gestures can still be beneficial though for your use-case.

[Filip Wiesner]

If you are happy with your current solution and just need the fling, you can use VelocityTracker to calculate fling on your own.

[Naveen Perumal]

Even if I can calculate the fling, the animateScrollBy() does not seem to work with my current solution

[Zach Klippenstein (he/him) [MOD]]

There’s a new modifier, draggable2d: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/package-summary#(androidx.compose.ui.Modifier).draggable2D(androidx.compose.foundation.gestures.Draggable2DState,kotlin.Boolean,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Boolean,kotlin.coroutines.SuspendFunction2,kotlin.coroutines.SuspendFunction2,kotlin.Boolean)

[Albert Chang]

Here’s another example of 2D fling. Note that you need to call animateDecay for the two axes separately.