How to add stickyness to fullscreen ScrollableRow elements with Jetpack Compose?

Question

I have a ScrollableRow with lets say 5 fullscreen composables.

ScrollableRow(
    modifier = Modifier.fillMaxSize(),
    scrollState = scrollState) {
        myData.items.forEachIndexed{ index, pageItem ->
            showPage(pageItem)
        }
}

Everything is shown so far, but when I swipe left/right it stops exactly on the position, where I stopped swiping: As you can see and imagne, almost everytime it stops between two of these full screen composables.

I'd rather have a kind of stickyness and show full pages for each single left/right swipe as pictured here:

So obviously, here in the second picture with third page showing:

• when I swipe one time left, I want to see full screen page 4, only
• when I swipe one time right, I want to see full screen page 2, only

I bet there is a mechanism for this?

Answer 1

HorizontalPager will suit you. Check Accompanist Pager layouts