---
title: "VerticalPagerScaffold"
description: "`VerticalPagerScaffold` is one of the Wear Material3 scaffold components."
type: "component"
---

<div class='type'>Composable Component</div>



`VerticalPagerScaffold` is one of the Wear Material3 scaffold components.

<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun VerticalPagerScaffold(
    pagerState: PagerState,
    modifier: Modifier = Modifier,
    pageIndicator: (@Composable BoxScope.() -> Unit)? = { VerticalPageIndicator(pagerState) },
    pageIndicatorAnimationSpec: AnimationSpec<Float>? = null,
    content: @Composable () -> Unit,
): Unit
```


#### Parameters

| | |
| --- | --- |
| pagerState | The state of the pager controlling the page content. |
| modifier | The modifier to be applied to the scaffold. |
| pageIndicator | A composable function that defines the page indicator to be displayed. By default, it uses a `VerticalPageIndicator`. |
| pageIndicatorAnimationSpec | - An optional parameter to set whether the page indicator should fade out when paging has finished. This is useful for when the underlying page content conflicts with the page indicator. By default this is null, so the page indicator will be visible at all times, setting this to `PagerScaffoldDefaults.FadeOutAnimationSpec` ensures the indicator only shows during paging, and fades out when the Pager is idle. |
| content | A composable function where a `androidx.compose.foundation.pager.VerticalPager` can be added. |






## Code Examples
### VerticalPagerScaffoldSample
```kotlin
@Composable
fun VerticalPagerScaffoldSample() {
    AppScaffold {
        val pagerState = rememberPagerState(pageCount = { 10 })
        VerticalPagerScaffold(pagerState = pagerState) {
            VerticalPager(
                state = pagerState,
                flingBehavior =
                    PagerDefaults.snapFlingBehavior(
                        state = pagerState,
                        maxFlingPages = 1,
                        snapPositionalThreshold = PagerScaffoldDefaults.HighSnapPositionalThreshold,
                        snapAnimationSpec = MaterialTheme.motionScheme.defaultSpatialSpec(),
                    ),
                rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(pagerState),
            ) { page ->
                AnimatedPage(pageIndex = page, pagerState = pagerState) {
                    ScreenScaffold {
                        Column(
                            modifier = Modifier.fillMaxSize(),
                            horizontalAlignment = Alignment.CenterHorizontally,
                            verticalArrangement = Arrangement.Center,
                        ) {
                            Text(text = "Page #$page")
                            Spacer(modifier = Modifier.height(8.dp))
                            Text(text = "Swipe up and down")
                        }
                    }
                }
            }
        }
    }
}
```
### VerticalPagerScaffoldWithLowSensitivitySample
```kotlin
@Composable
fun VerticalPagerScaffoldWithLowSensitivitySample() {
    AppScaffold {
        val pagerState = rememberPagerState(pageCount = { 3 })
        VerticalPagerScaffold(pagerState = pagerState) {
            VerticalPager(
                state = pagerState,
                flingBehavior =
                    PagerDefaults.snapFlingBehavior(
                        state = pagerState,
                        maxFlingPages = 0,
                        snapPositionalThreshold = PagerScaffoldDefaults.LowSnapPositionalThreshold,
                        snapAnimationSpec = PagerDefaults.SnapAnimationSpec,
                    ),
                rotaryScrollableBehavior =
                    RotaryScrollableDefaults.snapBehavior(
                        pagerState = pagerState,
                        snapSensitivity = RotaryScrollableDefaults.LowSnapSensitivity,
                    ),
            ) { page ->
                AnimatedPage(pageIndex = page, pagerState = pagerState) {
                    ScreenScaffold {
                        Column(
                            modifier = Modifier.fillMaxSize(),
                            horizontalAlignment = Alignment.CenterHorizontally,
                            verticalArrangement = Arrangement.Center,
                        ) {
                            Text(text = "Page #$page")
                            Spacer(modifier = Modifier.height(8.dp))
                            Text(text = "Swipe up and down")
                        }
                    }
                }
            }
        }
    }
}
```