{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ScaffoldKt

public final class ScaffoldKt


Summary

Public methods

static final void
@Composable
Scaffold(
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> topBar,
    @Composable @NonNull Function0<Unit> bottomBar,
    @Composable @NonNull Function0<Unit> snackbarHost,
    @Composable @NonNull Function0<Unit> floatingActionButton,
    @NonNull FabPosition floatingActionButtonPosition,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull WindowInsets contentWindowInsets,
    @Composable @NonNull Function1<@NonNull PaddingValuesUnit> content
)

Material Design layout.

static final boolean

Flag indicating if Scaffold should subcompose and measure its children during measurement or during placement.

static final void

Flag indicating if Scaffold should subcompose and measure its children during measurement or during placement.

Public methods

Scaffold

@Composable
public static final void Scaffold(
    @NonNull Modifier modifier,
    @Composable @NonNull Function0<Unit> topBar,
    @Composable @NonNull Function0<Unit> bottomBar,
    @Composable @NonNull Function0<Unit> snackbarHost,
    @Composable @NonNull Function0<Unit> floatingActionButton,
    @NonNull FabPosition floatingActionButtonPosition,
    @NonNull Color containerColor,
    @NonNull Color contentColor,
    @NonNull WindowInsets contentWindowInsets,
    @Composable @NonNull Function1<@NonNull PaddingValuesUnit> content
)

Material Design layout.

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:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FabPosition
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

val colors = listOf(
    Color(0xFFffd7d7.toInt()),
    Color(0xFFffe9d6.toInt()),
    Color(0xFFfffbd0.toInt()),
    Color(0xFFe3ffd9.toInt()),
    Color(0xFFd0fff8.toInt())
)

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("Simple Scaffold Screen") },
            navigationIcon = {
                IconButton(
                    onClick = { /* "Open nav drawer" */ }
                ) {
                    Icon(Icons.Filled.Menu, contentDescription = "Localized description")
                }
            }
        )
    },
    floatingActionButtonPosition = FabPosition.End,
    floatingActionButton = {
        ExtendedFloatingActionButton(
            onClick = { /* fab click handler */ }
        ) {
            Text("Inc")
        }
    },
    content = { innerPadding ->
        LazyColumn(
            // consume insets as scaffold doesn't do it by default
            modifier = Modifier.consumeWindowInsets(innerPadding),
            contentPadding = innerPadding
        ) {
            items(count = 100) {
                Box(
                    Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .background(colors[it % colors.size])
                )
            }
        }
    }
)

To show a Snackbar, use SnackbarHostState.showSnackbar.

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Snackbar
import androidx.compose.material3.SnackbarHost
import androidx.compose.material3.SnackbarHostState
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()
Scaffold(
    snackbarHost = { SnackbarHost(snackbarHostState) },
    floatingActionButton = {
        var clickCount by remember { mutableStateOf(0) }
        ExtendedFloatingActionButton(
            onClick = {
                // show snackbar as a suspend function
                scope.launch {
                    snackbarHostState.showSnackbar(
                        "Snackbar # ${++clickCount}"
                    )
                }
            }
        ) { Text("Show snackbar") }
    },
    content = { innerPadding ->
        Text(
            text = "Body content",
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
                .wrapContentSize()
        )
    }
)
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this scaffold

@Composable @NonNull Function0<Unit> topBar

top app bar of the screen, typically a SmallTopAppBar

@Composable @NonNull Function0<Unit> bottomBar

bottom bar of the screen, typically a NavigationBar

@Composable @NonNull Function0<Unit> snackbarHost

component to host Snackbars that are pushed to be shown via SnackbarHostState.showSnackbar, typically a SnackbarHost

@Composable @NonNull Function0<Unit> floatingActionButton

Main action button of the screen, typically a FloatingActionButton

@NonNull FabPosition floatingActionButtonPosition

position of the FAB on the screen. See FabPosition.

@NonNull Color containerColor

the color used for the background of this scaffold. Use Color.Transparent to have no color.

@NonNull 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.

@NonNull WindowInsets 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. Any insets consumed by other insets padding modifiers or consumeWindowInsets on a parent layout will be excluded from contentWindowInsets.

@Composable @NonNull Function1<@NonNull PaddingValuesUnit> 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.

getScaffoldSubcomposeInMeasureFix

@ExperimentalMaterial3Api
public static final boolean getScaffoldSubcomposeInMeasureFix()

Flag indicating if Scaffold should subcompose and measure its children during measurement or during placement. Set this flag to false to keep Scaffold's old measurement behavior (measuring in placement).

This flag will be removed in Compose 1.6.0-beta01. If you encounter any issues with the new behavior, please file an issue at: issuetracker.google.com/issues/new?component=742043

setScaffoldSubcomposeInMeasureFix

@ExperimentalMaterial3Api
public static final void setScaffoldSubcomposeInMeasureFix(
    @ExperimentalMaterial3Api boolean ScaffoldSubcomposeInMeasureFix
)

Flag indicating if Scaffold should subcompose and measure its children during measurement or during placement. Set this flag to false to keep Scaffold's old measurement behavior (measuring in placement).

This flag will be removed in Compose 1.6.0-beta01. If you encounter any issues with the new behavior, please file an issue at: issuetracker.google.com/issues/new?component=742043