In landscape mode, I have a lazyColum and in portr...

# compose

[youssef hachicha]

In landscape mode, I have a lazyColum and in portrait I have a Pager, I need to sync the current page index for the lazyListState when I am in portrait mode and sync the current page for the pagerState when I am in Landscape that way why I rotate my device it will that corresponding page

I made a class to do that, and it works fine but I am not sure if it is the best approach, code in the thread

[youssef hachicha]

@ExperimentalFoundationApi
@Composable
fun rememberQrScrollState(
    key1: Any?,
    initialPage: Int = 0,
    isLandscape: Boolean,
    scope: CoroutineScope = rememberCoroutineScope(),
    pagerState: PagerState = rememberPagerState(
        initialPage = initialPage.coerceIn(0, 603),
        pageCount = { 603 },
    ),
    lazyListState: LazyListState = rememberScrollPositionListState(
        key = "quranPager",
        initialFirstVisibleItemIndex = initialPage.coerceIn(0, 603)
    )
): QrScrollState {
    return remember(key1) {
        QrScrollState(
            initialPage,
            isLandscape,
            scope,
            pagerState,
            lazyListState
        )
    }
}

@OptIn(ExperimentalFoundationApi::class)
class QrScrollState @OptIn(ExperimentalFoundationApi::class) constructor(
    private val initialPage: Int,
    private val isLandscape: Boolean,
    private val scope: CoroutineScope,
    public val pagerState: PagerState,
    public val lazyListState: LazyListState
) {
    private val _currentPage = MutableStateFlow(initialPage)
    val currentPage: StateFlow<Int> = _currentPage.asStateFlow()

    fun listener() {
        scope.launch {
            // Sync pagerState to _currentPage
            if (isLandscape) {
                snapshotFlow { lazyListState.firstVisibleItemIndex }.collect { index ->
                    _currentPage.value = index
                    pagerState.scrollToPage(index)
                    println("pagerState current page ${index}")
                }
            } else {
                snapshotFlow { pagerState.currentPage }.collect { index ->
                    _currentPage.value = index
                    lazyListState.scrollToItem(index)
                    println("listState current page ${index}")
                }
            }
        }
    }

    fun scrollToPage(page: Int) {
        scope.launch {
            if (isLandscape) {
                lazyListState.scrollToItem(page)
            } else {
                pagerState.scrollToPage(page)
            }
        }
    }

    fun animateScrollToPage(page: Int) {
        scope.launch {
            if (isLandscape) {
                lazyListState.animateScrollToItem(page)
            } else {
                pagerState.animateScrollToPage(page)
            }
        }
    }
}

I am calling the listener in a LaunchedEffect and this is the part that I don't like

val currentPage by quranScrollState.currentPage.collectAsState()

LaunchedEffect(lazyListState.firstVisibleItemIndex, pagerState.currentPage) {
    quranScrollState.listener()
}

[youssef hachicha]

i used snapshotFlow thinking that it will collect the changes that would happen when a page changes but that didn't work and that is why I used a LaunchedEffect, so snapshotFlow is pretty usless