HorizontalPageIndicator

Horizontal page indicator for use with HorizontalPager, representing the currently active page and the approximate number of pages.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free

HorizontalPageIndicatorWithPagerSample

@Composable
fun HorizontalPageIndicatorWithPagerSample(navigateBack: () -> Unit) {
    val pageCount = 9
    val pagerState = rememberPagerState { pageCount }
    Box {
        HorizontalPagerScaffold(
            pagerState = pagerState,
            pageIndicator = { HorizontalPageIndicator(pagerState = pagerState) },
        ) {
            HorizontalPager(
                state = pagerState,
                flingBehavior =
                    PagerScaffoldDefaults.snapWithSpringFlingBehavior(state = pagerState),
            ) { page ->
                AnimatedPage(pageIndex = page, pagerState = pagerState) {
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center,
                    ) {
                        Text(text = "Page #$page")
                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = "Swipe left and right")
                        if (page == 0) {
                            Spacer(modifier = Modifier.height(8.dp))
                            Button(onClick = navigateBack) { Text("Exit") }
                        }
                    }
                }
            }
        }
    }
}