What is the use of Scaffold in Jetpack Compose and is it necessary?

Scaffold is a composable that works as a base for your screen(s). It can be used as a core layout that you can build on top of. In this article, we'll go through what the benefits of using Scaffolds are, what different types of Scaffolds exist and decide whether they are a good fit for your use cases.

What are Scaffolds in Jetpack Compose

Scaffolds are composables that place the layout foundations of your screens. Using a Scaffold gives you a lot of things for free. They help with the placement of composables in your screen and their theming.

More specifically, a Scaffold will automatically apply the MaterialTheme.color.background (or MaterialTheme.colorScheme.background) to its background and set the content color to the respective MaterialTheme.color.onBackground (or MaterialTheme.colorScheme.onBackground color).

The Scaffold also provides slots for standard UI elements in Android apps such as Top App Bars, Bottom Bars, Snackbars, Floating Action Buttons etc.

How to use the Scaffold composable

The following sample utilizes Scaffold's slots to display a screen with a Top App Bar, a Floating Action Button and some Text:

Scaffold(
    topBar = {
        TopAppBar {
            Text("App title")
        }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = { /*TODO*/ }) {
            Icon(Icons.Rounded.Add, contentDescription = "Add")
        }
    }
) {
    Text("Content")
}

will produce the following screen:

In the above code, we did not have to specify where the app bar, and the floating action button needs to be placed on the screen. The Scaffold handles that for us.

An other thing to be aware of is that the Scaffold exposes its state via the scaffoldState parameter. You can use this state to interact with elements on the screen, such as opening and hiding your Drawer.