onPageSelected callback for JetPack Compose Pager

Question

I am using JetPack Compose Pager from Accompanist and I'm wonder how do I know exactly when my page is Showed at screen. Like onPageSelected method from ViewPager.

Here is my code:

HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colors.background)
    ) { page ->
         // This method reinvoked many times.

      }

'Cause currently each recomposition would invoke that callback method from Pager.

Answer 1

I think it will be better to use

LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPage }.collect { page ->
        // do your stuff with selected page
    }
}

Answer 2

To complete @ysfcyln solution here is the official documentation :

https://google.github.io/accompanist/pager/#reacting-to-page-changes

the full example there is :

val pagerState = rememberPagerState()

LaunchedEffect(pagerState) {
    // Collect from the a snapshotFlow reading the currentPage
    snapshotFlow { pagerState.currentPage }.collect { page ->
        AnalyticsService.sendPageSelectedEvent(page)
    }
}

VerticalPager(
    count = 10,
    state = pagerState,
) { page ->
    Text(text = "Page: $page")
}