---
title: "Scaffold"
description: "Scaffold implements the basic Wear Material Design visual layout structure."
type: "component"
---

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



Scaffold implements the basic Wear Material Design visual layout structure.

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

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


```kotlin
@Composable
public fun Scaffold(
    modifier: Modifier = Modifier,
    vignette: @Composable (() -> Unit)? = null,
    positionIndicator: @Composable (() -> Unit)? = null,
    pageIndicator: @Composable (() -> Unit)? = null,
    timeText: @Composable (() -> Unit)? = null,
    content: @Composable () -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | optional Modifier for the root of the `Scaffold` |
| vignette | a full screen slot for applying a vignette over the contents of the scaffold. The vignette is used to blur the screen edges when the main content is scrollable content that extends beyond the screen edge. |
| positionIndicator | slot for optional position indicator used to display information about the position of the Scaffold's contents. Usually a `PositionIndicator`. Common use cases for the position indicator are scroll indication for a list or rsb/bezel indication such as volume. |
| pageIndicator | slot for optional page indicator used to display information about the selected page of the Scaffold's contents. Usually a `HorizontalPageIndicator`. Common use case for the page indicator is a pager with horizontally swipeable pages. |
| timeText | time and potential application status message to display at the top middle of the screen. Expected to be a TimeText component. |
| content | Slot for composable screen content |






## Code Examples
### SimpleScaffoldWithScrollIndicator
```kotlin
@SuppressLint("UnrememberedMutableState")
@Composable
fun SimpleScaffoldWithScrollIndicator() {
    val listState = rememberScalingLazyListState()
    val vignetteState = mutableStateOf(VignettePosition.TopAndBottom)
    val showVignette = mutableStateOf(true)
    Scaffold(
        positionIndicator = {
            PositionIndicator(scalingLazyListState = listState, modifier = Modifier)
        },
        vignette = {
            if (showVignette.value) {
                Vignette(vignettePosition = vignetteState.value)
            }
        },
        timeText = { TimeText() },
    ) {
        ScalingLazyColumn(
            contentPadding = PaddingValues(top = 40.dp),
            state = listState,
            modifier = Modifier.fillMaxWidth(),
        ) {
            item {
                Chip(
                    onClick = { showVignette.value = false },
                    label = { Text("No Vignette") },
                    colors = ChipDefaults.secondaryChipColors(),
                )
            }
            item {
                Chip(
                    onClick = {
                        showVignette.value = true
                        vignetteState.value = VignettePosition.Top
                    },
                    label = { Text("Top Vignette only") },
                    colors = ChipDefaults.secondaryChipColors(),
                )
            }
            item {
                Chip(
                    onClick = {
                        showVignette.value = true
                        vignetteState.value = VignettePosition.Bottom
                    },
                    label = { Text("Bottom Vignette only") },
                    colors = ChipDefaults.secondaryChipColors(),
                )
            }
            item {
                Chip(
                    onClick = {
                        showVignette.value = true
                        vignetteState.value = VignettePosition.TopAndBottom
                    },
                    label = { Text("Top and Bottom Vignette") },
                    colors = ChipDefaults.secondaryChipColors(),
                )
            }
            items(20) {
                Chip(
                    onClick = {},
                    label = { Text("List item $it") },
                    colors = ChipDefaults.secondaryChipColors(),
                )
            }
        }
    }
}
```