Scaffold

The basic screen layout: top bar, bottom bar, FAB, snackbars and content.

Category: Layout and structure
API status: Expressive
Compose APIs: Scaffold, FabPosition, ScaffoldDefaults
Interactive page: https://m3e.ljzapps.app/#components/scaffold

When to use

Scaffold places the app bars, the FAB and the snackbar host around your content and reports the padding the content needs. Always apply that padding, otherwise content hides behind the bars.

For screens that adapt to the window size, combine it with the adaptive scaffolds and a navigation rail.

Playground

The interactive page has a playground with live property controls for this component and generated code.

Examples

Top bar and FAB

Scaffold(
    modifier = Modifier.fillMaxWidth().height(320.dp),
    topBar = { CenterAlignedTopAppBar(title = { Text("Library") }) },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) { Icon(Icons.Rounded.Add, contentDescription = "Add") }
    },
) { padding ->
    LazyColumn(contentPadding = padding) {
        items((1..20).toList()) { ListItem(headlineContent = { Text("Item $it") }) }
    }
}

Parameters

Name	Type	Default	Description
`topBar / bottomBar`	`@Composable () -> Unit`	`{}`	App bar slots.
`floatingActionButton`	`@Composable () -> Unit`	`{}`	The FAB slot.
`floatingActionButtonPosition`	`FabPosition`	`FabPosition.End`	Start, End, Center or EndOverlay.
`snackbarHost`	`@Composable () -> Unit`	`{}`	Where snackbars appear.
`content`	`@Composable (PaddingValues) -> Unit`		Receives the inner padding.

Guidelines

Do:

Apply the content padding.
Hoist snackbar state outside the scaffold.

Don't:

Do not nest scaffolds.
Do not put the FAB into the bottom bar slot.

Accessibility

The landmark order is top bar, content, bottom bar. Keep it so keyboard focus follows the visual order.