My app is using

Scaffold

and I upgraded to Material3. In the Scaffold I specify:

topBar

,

content

,

bottomBar

. The

topBar

is a

TopAppBar

. The

content

is a scrolling

LazyColumn

. The top part of the content is now hidden below the topBar, while before it was starting below the topBar. Is there a specific parameter I need to set in order to see the whole content?

The

content

lambda actually takes in one argument that the Scaffold will pass in for padding that you would need to respect in order to not be obscured by the `topBar`:

Scaffold(
  topBar = { ... },
  content = { contentPadding ->
    LazyColumn(Modifier.padding(contentPadding)) {
      // ...
    }
  },
)

The LazyColumn is actually wrapped in other 3 composable. Which means means I have to propagate that contentPadding 3 times. So, is this a design change of Scaffold in Material3? I didn't need to specify any padding before.

You can apply the padding to the first composable that in the content, you don't have to apply it to the LazyColumn directly.

Maybe the problem is that they don’t want to change the padding, but the LazyList’s contentPadding instead, so that the content still draws behind those paddings?

I thought Material 2 Scaffold also passed in a contentPadding argument. The IDE even gives you a warning if you are not using it.

Material 2 did, but I think it only included the bottom bar.

Thanks @mkrussel, I solved it by applying the padding to the first composable. Yes, it seems in Material 2, it didn't apply to top bar

Isnt this because the TopAppBar can scroll with the content in M3? I dont think that was the case in M2