🤔 Documentation issue? Report or edit

Scaffold¶

A Scaffold is a layout which implements the basic material design layout structure. You can add things like a TopBar, BottomBar, FAB or a Drawer.

@Composable
fun ScaffoldDemo() {
    val materialBlue700= Color(0xFF1976D2)
    val scaffoldState = rememberScaffoldState(rememberDrawerState(DrawerValue.Open))
    Scaffold(
            scaffoldState = scaffoldState,
            topBar = { TopAppBar(title = {Text("TopAppBar")},backgroundColor = materialBlue700)  },
            floatingActionButtonPosition = FabPosition.End,
            floatingActionButton = { FloatingActionButton(onClick = {}){
                Text("X")
            } },
            drawerContent = { Text(text = "drawerContent") },
            content = { Text("BodyContent") },
            bottomBar = { BottomAppBar(backgroundColor = materialBlue700) { Text("BottomAppBar") } }
    )
}

DefaultWith Drawer open

scaffoldState¶

With the scaffoldState you can set the opening state of the drawer(DrawerState.Opened or DrawerState.Closed)

Here you can set the part of your layout that should be displayed on top of the screen. You can use it for things like a toolbar. You can set any Composable, but TopAppBar is already made for this usecase.

floatingActionButton¶

Here you can add FloatingActionButton. You can set any Composable, but FloatingActionButton is already made for this usecase

floatingActionButtonPosition¶

When you have added a FAB, you can use this specify the position of it. The default position is at the end of your layout.

drawerContent¶

Here you can set the content of your drawer.

Content¶

This is the primary content of the scaffold. You can add any Composable here.

bottomBar¶

Here you can set the part of your layout is on bottom of the screen. You can set any Composable, but BottomAppBar is already made for this usecase.

Tips¶

The bottombar is overlapping the content

Inside the content lambda you have access to the PaddingValues. You can use calculateBottomPadding() to get the height of the bottombar and then set an extra padding to your content