Jetpack compose Scaffolds TopAppBar elevation

Question

Trying to add elevation to my TopAppBar in Scaffold topBar. Using Jetpack compose, material 3.

This is how it worked before:

TopAppBar(
        title = {
            Text(text = title)
        },
        elevation = 3.dp //Not valid anymore
    )

Current allowed parameters in TopAppBar are:

public fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier,
    navigationIcon: @Composable () -> Unit,
    actions: @Composable() (RowScope.() -> Unit),
    windowInsets: WindowInsets,
    colors: TopAppBarColors,
    scrollBehavior: TopAppBarScrollBehavior?
): Unit

This is what I have:

This is what I need:

It could be done before using parameter to pass elevation but that is not option anymore.

What would be solution to elevate whole TopAppBar? Thanks in advance!

Answer 1

Have you tried it with a surface..?

Scaffold(topBar = {
    Surface(shadowElevation = 3.dp) {
        SmallTopAppBar(title = {
            Text(
                text = "title"
            )
        })
    }
}) {
// Content
}

Check the output :