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

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



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

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

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


```kotlin
@Composable
public fun AppScaffold(
    modifier: Modifier = Modifier,
    timeText: @Composable () -> Unit = { TimeText() },
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    content: @Composable BoxScope.() -> Unit,
)
```


#### Parameters

| | |
| --- | --- |
| modifier | The modifier for the top level of the scaffold. |
| timeText | The default time (and potentially status message) to display at the top middle of the screen in this app. When `AppScaffold` is used in combination with `ScreenScaffold`, the time text will be scrolled away and shown/hidden according to the scroll state of the screen. |
| containerColor | The container color of the app drawn behind the `content`, i.e. the color of the background behind the content. |
| contentColor | The content color for the application `content`. |
| content | The main content for this application. |






## Code Examples
### ScaffoldSample
```kotlin
@Preview
@Composable
fun ScaffoldSample() {
    // Declare just one [AppScaffold] per app such as in the activity.
    // [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
    // during in-app transitions such as swipe-to-dismiss.
    AppScaffold {
        // Define the navigation hierarchy within the AppScaffold,
        // such as using SwipeDismissableNavHost.
        // For this sample, we will define a single screen inline.
        val listState = rememberScalingLazyListState()
        // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
        // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
        ScreenScaffold(scrollState = listState, contentPadding = PaddingValues(10.dp)) {
            contentPadding ->
            ScalingLazyColumn(
                state = listState,
                contentPadding = contentPadding,
                modifier = Modifier.fillMaxSize(),
            ) {
                items(10) { Button(onClick = {}, label = { Text("Item ${it + 1}") }) }
            }
        }
    }
}
```