Scaffold: โครงร่างหน้าจอ

Most app screens share the same skeleton: a bar on top, content in the middle, maybe a button floating below. Scaffold gives you all of that in one Composable. 🏗️

You could hand-build bars with a Column, but you would re-solve insets, spacing, and overlaps every time. Scaffold wires those standard pieces together for you.

Scaffold works with slots: named spots where you drop a Composable. You fill the slots you want and leave the rest empty.

The one slot you almost always use is content. It is the main body of your screen, and Scaffold hands it the right padding to use.

That innerPadding keeps your content from hiding under bars. Always apply it to your top-level content, or text can slip beneath the app bar.

Drop a bar into the topBar slot and Scaffold pins it to the top, then shrinks the content area so nothing overlaps.

Scaffold also offers bottomBar, floatingActionButton, and snackbarHost slots. You will meet each one in this course.

Every slot is optional. A Scaffold with only content is perfectly valid, so you add bars only when a screen actually needs them.

The usual rule is one Scaffold per screen. It frames that whole screen, while smaller Composables fill its content slot.

Import Scaffold from androidx.compose.material3 so its colors and spacing match the rest of your Material You theme.

Set containerColor to paint the screen background behind every slot. Skip it and Scaffold uses your theme's surface color by default.

What is the safest thing to do with the value Scaffold passes to its content lambda?

Scaffold is your screen skeleton: fill named slots like content and topBar, honor innerPadding, and use one per screen. Next you will style the top bar. 👍