I have been trying to make it so that the first item on a LazyRow is centered in the middle of the screen as soon as the app is opened. The snapping behavior works once it is scrolled, but when the app is initially opened, the first item is not centered on the page.
LazyRow with snapper and infinite scrolling
@OptIn(ExperimentalSnapperApi::class)
@Composable
fun CircularList(
data: List<SingleBox>,
modifier: Modifier = Modifier,
isEndless: Boolean = true
) {
val listState = rememberLazyListState(
if (isEndless) Int.MAX_VALUE / 2 else 0
)
val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp
val contentPadding = PaddingValues(horizontal = screenWidth / 2) //This moves starting point of item horizontally
BoxWithConstraints {
LazyRow(
state = listState,
modifier = modifier,
contentPadding = contentPadding,
flingBehavior = rememberSnapperFlingBehavior(listState, SnapOffsets.Center, snapIndex = { _, startIndex, targetIndex ->
targetIndex.coerceIn(startIndex - 7, startIndex + 7) //This snaps item to center of page when LazyRow stops moving
})
)
{
items(
count = if (isEndless) Int.MAX_VALUE else data.size, //This makes it scroll infinitly
itemContent = {
val index = it % data.size
CustomItem(data[index]) // item composable
},
)
}
}
}
How it looks when opened
How it should look when app is opened
