Jetpack Compose Scaffold in Material 3 Compose

<a href="https://material.io/design/layout/understanding-layout.html" class="external" target="_blank">Material Design layout</a>.

Scaffold implements the basic material design visual layout structure.

This component provides API to put together several material components to construct your screen, by ensuring proper layout strategy for them and collecting necessary data so these components will work together correctly.

Simple example of a Scaffold with SmallTopAppBar, FloatingActionButton:

Overloads

Scaffold

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
)

Parameters

Name	Description
`modifier`	the Modifier to be applied to this scaffold
`topBar`	top app bar of the screen, typically a SmallTopAppBar
`bottomBar`	bottom bar of the screen, typically a NavigationBar
`snackbarHost`	component to host Snackbars that are pushed to be shown via SnackbarHostState.showSnackbar, typically a SnackbarHost
`floatingActionButton`	Main action button of the screen, typically a FloatingActionButton
`floatingActionButtonPosition`	position of the FAB on the screen. See FabPosition.
`containerColor`	the color used for the background of this scaffold. Use Color.Transparent to have no color.
`contentColor`	the preferred color for content inside this scaffold. Defaults to either the matching content color for containerColor, or to the current LocalContentColor if containerColor is not a color from the theme.
`contentWindowInsets`	window insets to be passed to content slot via PaddingValues params. Scaffold will take the insets into account from the top/bottom only if the topBar/ bottomBar are not present, as the scaffold expect topBar/bottomBar to handle insets instead
`content`	content of the screen. The lambda receives a PaddingValues that should be applied to the content root via Modifier.padding and Modifier.consumeWindowInsets to properly offset top and bottom bars. If using Modifier.verticalScroll, apply this modifier to the child of the scroll, and not on the scroll itself