TopAppBar does not drop shadow

Question

I have a TopAppBar within my Scaffold in my composable, but it is not droping a shadow as it is supposed to do:

@Composable
fun MainScreen(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = stringResource(id = R.string.appName)) },
            )
        }
    ) {
        Text("Composable content")
    }
}

Even if I manually set an elevation it does not drop any shadow:

    TopAppBar(
        title = { Text(text = stringResource(id = R.string.appName)) },
        elevation = 4.dp
    )

What needs to be done so the AppBar drops a shadow?

Answer 1

Can you try this in Box ?

Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.White,
    ) {
        Column (){
            Box(modifier = Modifier.height(80.dp)) {
                TopAppBar(
                    backgroundColor = Color.White,
                    title = { Text("Title") },
                    elevation = 10.dp
                )
            }
            Text(text = "Composable content", style = TextStyle(
                color = Color.Black
            ))
        }
    }